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

Question

我的网站http://dekomkommertijd.nl有一个横幅，上面有我用 CSS 动画（移动）div 制作的移动云。他们向左进入，当他们离开屏幕在右侧时，他们会创建一个水平滚动条。一切都按我的意愿工作，除了我不想要滚动条，除了我的内容 div 中的内容（画布 - 宽度为 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;

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

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

Answer 2

overflow-y: hidden从以下代码中删除：

html {
    overflow-y: scroll; /* Remove This Line */
    -webkit-font-smoothing: antialiased;
}

并在身体上应用以下样式：

body {
    overflow-y: auto;
    overflow-x: hidden;
}

希望它会奏效。