如何避免带有过渡元素的水平滚动条

Question

我在多个元素中使用transform:translate在过渡效果中添加幻灯片。 这很好。 我遇到的问题是，因为元素最初不在屏幕上，所以出现滚动条，直到元素变形并滑过。

我正在使用航点作为滚动点，并且看到了其他情况（页面外的幻灯片）未出现滚动条。

如何确保滚动条不会与这些过渡元素一起出现在页面上？

到达航路点时， active类别将添加到phone-slide 。

#phone-slide {
    width: 65%;
    display: block;
    height: auto;
    position: absolute;
    right: -50%;
    margin: 10px 0;
    opacity: 0;
    transition: 1s;-webkit-transition: 1s;
}
#phone-slide.active {
    opacity: 1;
    transform: translateX(-50%);-webkit-transform: translateX(-50%);
    transition: 1s;-webkit-transition: 1s;
}

Answer 1

最好的方法是将phone-slide放置在绝对位置的div中，并隐藏溢出。 此div的宽度和高度可以等于页面尺寸，并且如果其中的内容超出范围且没有滚动条，则该内容将被截断。

请参见本 雅各尤因解决方案

另一个可接受的答案