当窗口是overflow-x:hidden的特定宽度时,允许水平滚动

时间:2017-01-27 04:30:31

标签: html css

我正在创建一个网站,并在全屏时阻止水平滚动,我在网站的主体css中使用了“overflow-x:hidden”属性。

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

谢谢,我很感激任何帮助!

3 个答案:

答案 0 :(得分:3)

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

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

请确保在您的主@media规则之后将body规则放在样式表中,否则your overflow-x: hidden declaration will always take precedence

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

答案 1 :(得分:0)

在页面中添加以下元标记和CSS

$: ionic g page my-page

<强> CSS

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

<强> HTML

body { overflow-x:hidden; } .test { width:auto; } @media screen and (max-width:600px) { body { overflow-x:auto; } .test { width:600px; } }

答案 2 :(得分:-1)

您可以使用媒体查询

在页面中添加以下元标记以允许响应式css

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

以下是css

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