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

【问题标题】：How to avoid horizontal scroll bar with transitioned elements如何避免带有过渡元素的水平滚动条
【发布时间】：2017-05-10 18:32:27
【问题描述】：

我有多个元素，我使用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;
}

【问题讨论】：

您能否使用 codepen 或 jsfiddle 分享您的问题，让我们看看实际发生了什么？

标签： javascript jquery css

【解决方案1】：

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

请参阅 Jacob Ewing

的 THIS 解决方案

另一个接受answer

【讨论】：