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

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

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


当前回答

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

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

其他回答

设置高度和溢出:

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

http://jsfiddle.net/q99hvawt/

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

position: fixed;

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

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

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

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

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

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

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

HTML css工作很好,如果主体标签不做什么,你也可以写

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

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