水平动画导致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 post on the similar matter，the article，and another article。所有人都建议做一个溢出：隐藏，但它对我不起作用：我尝试了身体和文本动画本身。

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

它出现在我的两个不同尺寸的显示器上，我正在使用Google Chrome进行测试。

更新

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

更新2

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

Answer 1

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

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

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