禁用身体滚动

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

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

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

当前回答

这篇文章很有帮助，但我只是想分享一个可以帮助其他人的小方法:

设置max-height而不是height也可以。在我的例子中，我基于类切换禁用滚动。设置. somcontainer{高度:100%;当容器的高度小于视口的高度时，溢出:hidden;}将拉伸容器，这不是您想要的。设置max-height可以说明这一点，但是如果容器的高度在内容更改时大于视口的高度，则仍然禁用滚动。

2017-12-07 17:01:26

其他回答

设置高度和溢出:

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

http://jsfiddle.net/q99hvawt/

2015-02-09 14:03:12

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

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

如今，许多新闻网站都要求用户创建一个账户。通常情况下，它们会让用户在一秒钟内完全访问页面，然后弹出一个窗口，阻止用户向下滚动页面。

EDIT

此外，一些网站(如Quora)也会使部分文本模糊。通常他们通过应用下面的CSS来做到这一点。

filter: blur(3px);

2020-01-11 21:17:00

这将阻止页面滚动:

body, html {
  overflow: hidden
}

2021-12-21 05:43:22

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

使用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。

有用的链接:

https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement https://caniuse.com/document-scrollingelement https://github.com/yangg/scrolling-element

2021-04-07 12:19:55

禁用身体滚动

推荐文章

最新文章

标签