html - 当窗口具有溢出-x :hidden 的特定宽度时允许水平滚动

Question

我正在创建一个网站，为了防止全屏时水平滚动，我在网站的正文 CSS 中使用了“overflow-x:hidden”属性。

我想问的是，一旦用户将窗口大小调整到 600 像素宽度或更低，是否有办法再次允许水平滚动。

谢谢，我将不胜感激任何帮助!

Answer 1

是的，您可以使用媒体查询即时切换 overflow-x 的值:

@media (max-width: 600px) {
    body {
        overflow-x: auto;
    }
}

请务必将此 @media 规则放置在样式表中的主 body 规则之后，否则 your overflow-x: hidden declaration will always take precedence .

另请注意，虽然 width 媒体功能对应于视口(viewport)的宽度，但 body 元素不与在视口(viewport)中，以这种方式设置 overflow-x 实际上会影响视口(viewport)上的滚动条，而不是 body 元素，这意味着即使您的 body 也能按预期工作 元素比正常情况更窄，或者您没有删除其默认边距(正如作者通常所做的那样)。这是intentional behavior ，尽管在某些情况下它可能会被覆盖。