【问题标题】：Horizontal animation causes vertical scrollbar in css水平动画导致css中的垂直滚动条
【发布时间】：2016-11-10 02:39:08
【问题描述】：

我正在制作网站动画（旋转的齿轮和无限左右移动的文本）。这是我的正文代码

body {
overflow:hidden;
height:100%;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
//background attachments
}

这是来自同一文件的相关动画代码sn-p

#cog { /* image on maintenance.html page */
display:block;
margin:auto;
margin-top:300px;
animation:spin 5s ease infinite;
}
@keyframes spin { /* animation for image on maintenance.html page */
from { transform:rotate(-45deg); }
50% { transform:rotate(10deg); }
75% { transform:rotate(-10); }
to { transform:rotate(-45deg); }
}
#maintenance { /* text image under cog graphic on maintenance.html page */
display:block;
margin:auto;
/* margin-top:30px; */
animation:maint 5s ease infinite;
overflow: hidden;
}
@keyframes maint { /* animation for second image on maintenance.html page */
50% { transform: translate(-200px, 0); }
}

当文本到达右侧（或非常靠近它）的最终点时，它会导致出现一个垂直滚动条。并且文本越靠近右侧，滚动条就越大（滚动条内的条越小）。反之亦然，当文本开始从最后的右点向左移动时。

我已经检查过SO post on the similar matter、the article、and another article。他们都建议做一个溢出：隐藏，但它对我不起作用：我尝试了正文和文本动画本身。

我还注意到只有当鼠标在动画容器内时才会出现这个滚动条（不仅仅是空闲的鼠标，而是四处移动）。

它出现在我的两个不同尺寸的显示器上，我正在使用谷歌浏览器对其进行测试。

更新

在尝试了建议的 codepen 和 fiddle 后，看起来带有导航栏的容器有问题。我会玩弄它并分享结果。

更新 2

解决了我的问题，请看答案。

【问题讨论】：

我不确定这是否能解决问题，但请尝试添加 position: 相对于溢出中涉及的每个元素。它们默认为静态，这可能是导致您的问题的原因。
@will 刚刚尝试过 - 它没有解决问题。
您可以通过什么方式发布工作示例？
你的意思是html文件？
像 codepen codepen.io/pen 或链接到该站点，这样我就可以实际查看它，而不必复制它

标签： css google-chrome css-animations

【解决方案1】：

仅将overflow:hidden 应用于正文是不够的。该行也需要应用于容器（在我的例子中是导航栏），它存在于页面上，但不直接涉及动画容器。

codepen 和 jsfiddle 工具的使用帮助我解决了我的问题。

希望我的回答和这些工具能帮助网页设计师在未来解决此类问题。

【讨论】：