我想完全禁用HTML主体上的滚动。我尝试了以下几种方法:
溢出:隐藏;(不工作,没有禁用滚动,它只是隐藏滚动条) 位置:固定;(这是工作,但它完全滚动到顶部,这是不可接受的这个特定的应用程序)
我找不到这两个选项之外的其他选项,还有吗?
我想完全禁用HTML主体上的滚动。我尝试了以下几种方法:
溢出:隐藏;(不工作,没有禁用滚动,它只是隐藏滚动条) 位置:固定;(这是工作,但它完全滚动到顶部,这是不可接受的这个特定的应用程序)
我找不到这两个选项之外的其他选项,还有吗?
当前回答
当你需要为你的web应用程序创建一个弹出式组件时,还有另一种方便的方法来禁用滚动,而无需动态更改body元素。 首先,添加这个样式:
body:has(.requires-no-scroll) {
overflow: hidden;
}
然后,当你创建/打开任何弹出框时,只需将这个类添加到它,它的存在将自动阻止滚动(并在你删除弹出框时解除阻塞):
<div class="popup requires-no-scroll">
...
</div>
这对于响应式应用来说是很好的,当你根据一些响应式布尔变量显示弹出框时:滚动块本身,你不需要做任何其他事情。
其他回答
HTML css工作很好,如果主体标签不做什么,你也可以写
<body scroll="no" style="overflow: hidden">
在这种情况下,重写应该在body标签上,它更容易控制,但有时会让人头疼。
如果你不介意页面滚动到顶部的话。你可以:
position: fixed;
在你不想滚动的元素上。我知道这不是你想要的答案,但我直接回答了那些谷歌这个问题的人。
当你需要为你的web应用程序创建一个弹出式组件时,还有另一种方便的方法来禁用滚动,而无需动态更改body元素。 首先,添加这个样式:
body:has(.requires-no-scroll) {
overflow: hidden;
}
然后,当你创建/打开任何弹出框时,只需将这个类添加到它,它的存在将自动阻止滚动(并在你删除弹出框时解除阻塞):
<div class="popup requires-no-scroll">
...
</div>
这对于响应式应用来说是很好的,当你根据一些响应式布尔变量显示弹出框时:滚动块本身,你不需要做任何其他事情。
为此,在<body>元素上添加2个CSS属性。
body {
height: 100%;
overflow-y: hidden;
}
如今,许多新闻网站都要求用户创建一个账户。通常情况下,它们会让用户在一秒钟内完全访问页面,然后弹出一个窗口,阻止用户向下滚动页面。
EDIT
此外,一些网站(如Quora)也会使部分文本模糊。通常他们通过应用下面的CSS来做到这一点。
filter: blur(3px);
这将阻止页面滚动:
body, html {
overflow: hidden
}