禁用身体滚动

我想完全禁用HTML主体上的滚动。我尝试了以下几种方法:

溢出:隐藏;(不工作，没有禁用滚动，它只是隐藏滚动条) 位置:固定;(这是工作，但它完全滚动到顶部，这是不可接受的这个特定的应用程序)

我找不到这两个选项之外的其他选项，还有吗?

当前回答

当你需要为你的web应用程序创建一个弹出式组件时，还有另一种方便的方法来禁用滚动，而无需动态更改body元素。首先，添加这个样式:

body:has(.requires-no-scroll) {
  overflow: hidden;
}

然后，当你创建/打开任何弹出框时，只需将这个类添加到它，它的存在将自动阻止滚动(并在你删除弹出框时解除阻塞):

<div class="popup requires-no-scroll">
  ...
</div>

这对于响应式应用来说是很好的，当你根据一些响应式布尔变量显示弹出框时:滚动块本身，你不需要做任何其他事情。

2022-12-30 20:17:51

其他回答

HTML

<body id="appBody">
....
</body>

function disableBodyScroll(){
 const element = document.querySelector("#appBody");
 element.classList.add("stop-scroll");
}

function enableBodyScroll(){
 const element = document.querySelector("#appBody");
 element.classList.remove("stop-scroll");
}

CSS

 .stop-scroll {
      margin: 0;
      height: 100%;
      overflow: hidden;
    }

2021-05-26 17:18:34

设置高度和溢出:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

2015-02-09 14:03:12

你为什么不试试这个:

<style type="text/css">
html, body {
  overflow: hidden;
}
</style>

2021-07-12 13:31:36

如果你不介意页面滚动到顶部的话。你可以:

position: fixed;

在你不想滚动的元素上。我知道这不是你想要的答案，但我直接回答了那些谷歌这个问题的人。

2021-07-01 03:05:12

这将阻止页面滚动:

body, html {
  overflow: hidden
}

2021-12-21 05:43:22

禁用身体滚动

推荐文章

最新文章

标签