我想完全禁用 HTML body 上的滚动。我尝试了以下选项：
溢出：隐藏； （不工作，没有禁用滚动，它只是隐藏了滚动条）
位置：固定； （这行得通，但它完全滚动到顶部，这对于这个特定的应用程序是不可接受的）
我找不到这两个选项的任何替代方案，还有吗？
设置 height 和 overflow：
html, body {margin: 0; height: 100%; overflow: hidden}
这篇文章很有帮助，但只是想分享一个可能对其他人有所帮助的替代方案：
设置 max-height 而不是 height 也可以解决问题。就我而言，我正在禁用基于类切换的滚动。当容器的高度小于视口的高度时设置 .someContainer {height: 100%; overflow: hidden;} 会拉伸容器，这不是您想要的。设置 max-height 说明了这一点，但如果内容更改时容器的高度大于视口的高度，仍会禁用滚动。
为此，请在 <body> 元素上添加 2 个 CSS 属性。
body {
height: 100%;
overflow-y: hidden;
}
如今，有许多新闻网站需要用户创建一个帐户。通常他们会在大约一秒钟内完全访问页面，然后他们会显示一个弹出窗口，并阻止用户向下滚动。
https://i.stack.imgur.com/0Z2cs.png
编辑
此外，一些网站（例如 Quora）也会使部分文本变得模糊。通常，他们通过应用以下 CSS 来做到这一点。
filter: blur(3px);
使用反应 >= 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
你为什么不试试这个：
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
如果您对页面滚动到顶部感到满意。你可以做：
position: fixed;
在您不想滚动的元素上。我知道这不是您想要的答案，但我正在直接为那些在谷歌上搜索此问题的人回答标题。
这将防止页面滚动：
body, html {
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;
}
关注公众号
不定期副业成功案例分享
height: 100vh； )