在 Body 上禁用滚动

Question

我想完全禁用 HTML body 上的滚动。我尝试了以下选项：

overflow: hidden;（不工作，没有禁用滚动，它只是隐藏了滚动条）
position: fixed;（这行得通，但它完全滚动到顶部，这对于这个特定的应用程序来说是不可接受的）

我找不到这两个选项的替代方案，还有更多吗？

Answer 1

设置height和overflow:

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

http://jsfiddle.net/q99hvawt/

Answer 2

HTML css 如果 body 标签什么都不做你也可以写

<body scroll="no" style="overflow: hidden">

在这种情况下覆盖应该在body标签上，它更容易控制但有时会让人头疼。

Answer 3

这个 post 很有帮助，但只是想分享一个可能对其他人有帮助的小替代方案：

设置 max-height 而不是 height 也能达到目的。在我的例子中，我禁用基于 class 切换的滚动。当容器的高度小于视口的高度时设置 .someContainer {height: 100%; overflow: hidden;} 会拉伸容器，这不是您想要的。设置 max-height 说明了这一点，但是如果内容更改时容器的高度大于视口的高度，仍然会禁用滚动。

Answer 4

为此，请在 <body> 元素上添加 2 个 CSS 属性。

body {
   height: 100%;
   overflow-y: hidden;
}

现在有很多新闻网站要求用户创建一个帐户。通常，他们会在大约一秒钟内授予对该页面的完全访问权限，然后显示一个弹出窗口，并阻止用户向下滚动。

编辑

此外，一些网站（例如 Quora）也会使部分文本变得模糊。一般来说，他们通过应用以下 CSS.

来做到这一点

filter: blur(3px);

Answer 5

使用 React >= 17.8？
想有条件地执行此操作？

useEffect 救援！

function useImperativeDisableScroll({ element, disabled }) {
    useEffect(() => {
        if (!element) {
            return
        }

        element.style.overflowY = disabled ? 'hidden' : 'scroll'

        return () => {
            element.style.overflowY = 'scroll'
        }
    }, [disabled])
}

您可以将其用于例如

useImperativeDisableScroll({ element: document.body, disabled: true })

根据您的用例，您可能更幸运

useImperativeDisableScroll({
    element: document.scrollingElement,
    disabled: true
})

但是请注意，在撰写本文时，您可能需要填充 document.scrollingElement。

有用的链接：

Answer 6

HTML

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

JS

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;
    }

Answer 7

如果您同意页面滚动到顶部。你可以这样做：

position: fixed;

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

Answer 8

你为什么不试试这个：

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

Answer 9

这会阻止页面滚动：

body, html {
  overflow: hidden
}

在 Body 上禁用滚动

Disable Scrolling on Body

html

css

scroll

编辑