我正在创建一个网站,并在全屏时阻止水平滚动,我在网站的主体css中使用了“overflow-x:hidden”属性。
我想问的是,一旦用户将窗口大小调整为600px宽度或更低,是否有办法再次允许水平滚动。
谢谢,我很感激任何帮助!
答案 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}
}