我使用了一些滚动动画，但它会导致屏幕的水平滚动

Question

我已经在我正在构建的网站的许多元素上设置了一些滚动动画。

我正在使用以下CSS规则：

.hiddenLeft {
opacity: 0;
filter: blur(5px);
transform: translateX(-090%);
transition: all 1s;
}
.hiddenRight {
opacity: 0;
filter: blur(5px);
transform: translateX(90%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}

默认情况下，hiddenLeft和hiddenRight类在元素中，然后当它们在垂直滚动过程中相交时，将添加显示类。

这一切都很好，除了它创建了水平滚动到右侧的空白区域。

我想保持动画的原样，但没有水平滚动。

一张我滚动到空白处的照片供参考：

在此处输入图像描述

我在这里做了一个非常基本的复制：

https://codepen.io/acodeaday/pen/NWMYWNL

我可以看到违规线路是

transform:translateX(90%(；

但这使得动画在美学上非常令人愉悦。所以我希望有一种方法可以在保持这种状态的同时解决这个问题。

Answer 1

尝试使用

max-width: 100%!important; height: auto; overflow: hidden!important;

这段代码是你把所有动画都放进去的。这可能是一个div.希望这有帮助~