CSS中的水平动画导致垂直滚动条

Question

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

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

这是同一文件中相关的动画代码片段。

#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); }
}

当文本到达最终右侧位置（或非常靠近它）时，会出现垂直滚动条。文本越接近右侧，滚动条就越大（滚动条内部的条变小）。反之，当文本从最终右侧点开始向左移动时，情况则相反。

我已经查看了类似问题的Stack Overflow帖子、文章和另一篇文章。它们都建议使用overflow:hidden，但这对我没有起作用：我尝试过body和文本动画本身。

我还注意到，只有当鼠标在动画容器内部（不仅是闲置鼠标，而是移动鼠标）时，才会出现此滚动条。

它在我的两个不同大小的监视器上都发生，并且我正在使用Google Chrome进行测试。

更新

尝试了建议的codepen和fiddle之后，看起来问题出在带有导航栏的容器上。我会调整一下并分享结果。

更新2

问题已解决，请查看答案。

- Vadzim Savenok

---

我不确定这是否能解决问题，但是尝试为涉及到溢出的每个元素添加position: relative。它们默认为静态，这可能是导致问题的原因。 - will

@will 刚刚尝试了一下 - 它没有解决问题。 - Vadzim Savenok

你能提供一个可运行的示例吗？ - will

你是指 HTML 文件吗？ - Vadzim Savenok

@will 看起来是带有导航栏的 div 出了问题。我会通知你结果，但很抱歉我不能分享更多信息。 - Vadzim Savenok

Answer 1

仅将 overflow:hidden 应用于 body 是不够的。该行也需要应用于容器（在我的情况下是带有导航栏的容器），该容器存在于页面上，但不直接涉及动画容器。

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

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

- Vadzim Savenok