我想完全禁用HTML主体上的滚动。我尝试了以下几种方法:
溢出:隐藏;(不工作，没有禁用滚动，它只是隐藏滚动条) 位置:固定;(这是工作，但它完全滚动到顶部，这是不可接受的这个特定的应用程序)
我找不到这两个选项之外的其他选项，还有吗?
当前回答
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;
}
其他回答
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;
}
这篇文章很有帮助，但我只是想分享一个可以帮助其他人的小方法:
设置max-height而不是height也可以。在我的例子中，我基于类切换禁用滚动。设置. somcontainer{高度:100%;当容器的高度小于视口的高度时，溢出:hidden;}将拉伸容器，这不是您想要的。设置max-height可以说明这一点，但是如果容器的高度在内容更改时大于视口的高度，则仍然禁用滚动。
这将阻止页面滚动:
body, html {
overflow: hidden
}
使用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
如果你不介意页面滚动到顶部的话。你可以:
position: fixed;
在你不想滚动的元素上。我知道这不是你想要的答案，但我直接回答了那些谷歌这个问题的人。
