谷歌浏览器 - 水平动画导致 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); }
}

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

我已经检查了关于类似问题、文章和另一篇文章的 SO 帖子。他们都建议做一个溢出：隐藏，但它对我不起作用：我尝试了正文和文本动画本身。

我还注意到，仅当鼠标位于动画容器内（不仅是空闲鼠标，而是四处移动）时，才会出现此滚动条。

它

发生在我两个不同尺寸的显示器上，我正在使用谷歌浏览器来测试它。

更新

在尝试建议的代码笔和小提琴后，看起来带有导航栏的容器有问题。我会玩弄它并分享结果。

更新 2

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

Answer 1

仅将overflow:hidden应用于身体是不够的。该行还需要应用于容器（在我的例子中带有导航栏），该容器存在于页面上，但不直接参与动画容器。

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

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