css - 我想在横幅中禁用用于移动 div(移动到屏幕外)的水平滚动条；但不适用于其余内容

Question

我的网站http://dekomkommertijd.nl有一个带有移动云的横幅，我用 CSS 动画(移动)div 制作。他们向左输入，当他们在右侧离开屏幕时，他们创建了一个水平滚动条。一切都按我的意愿工作，除了我不想要滚动条，除了我的内容 div 中的内容( Canvas - 宽度为 960px)。外面的一切都应该没有水平滚动条，并且只离开屏幕。

我尝试了几种我发现的方法(主要用于静态 div)，但它们不适用于我的移动 div。

有人知道怎么解决吗？

谢谢。瑞克

Answer 1

您描述它的方式向我暗示您希望您的云和其他内容以不同的方式溢出。溢出由父级决定，因此要以不同方式处理溢出，您需要有两个父级:一个用于云，一个用于内容。

如果您选择这样做，将云父级设置为绝对定位会使其脱离正常的文档流，因此它不会干扰您的其余内容。并设置溢出使其按照您的意愿运行。

width: 100%; /* Spans the whole document */
overflow-x: hidden; /* Hides overflow instead of displaying it */
position: absolute;
top: 0; left: 0;

另一种解决方案是以相同方式处理云和其他内容的溢出。如果你这样做，你可以将它设置为隐藏在一个共同的父元素上，比如 body。

第二个解决方案可能更有意义，因为它 1. 更简单，并且 2. 除了云层溢出之外，您不太可能拥有任何其他东西。