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

如果body标签没有做任何你可以编写的内容，那么HTML css工作正常

var selectedRoleNames = from r in RoleManager.Roles
                        where r.Users.Select(u => u.UserId).Contains(user.Id)
                        select r;

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

Answer 3

这篇文章很有帮助，但只是想分享一些可能对其他人有帮助的替代方案：

设置max-height代替height也可以解决问题。就我而言，我基于类切换禁用滚动。当容器的高度小于视口的高度时设置.someContainer {height: 100%; overflow: hidden;}会拉伸容器，这不是您想要的。设置max-height会计，但如果容器的高度大于内容更改时的视口，则仍会禁用滚动。

Answer 4

要完成此操作，请在<body>元素上添加2个CSS属性。

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

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

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

但是请注意，在撰写本文时，您可能需要 polyfill 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;

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

Answer 8

为什么不试试这个：

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

禁用滚动身体

8 个答案: