pan*_*her 194
设置height和overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
- 在"身体之前"忘了"html". (3认同)
- 如果你在`ios`上打开一个键盘,它将无法工作 (3认同)
- 当您具有固定位置的overlay元素时，无法在iOS上使用。 (2认同)
- 您只需添加“溢出”：“隐藏”即可正常工作。 (2认同)
- 有时你更喜欢使用 `height: 100vh` ；） (2认同)
小智 16
HTML css工作正常,如果body标签没有做任何你也可以写的东西
<body scroll="no" style="overflow: hidden">
在这种情况下,覆盖应该在身体标签上,它更容易控制,但有时会让人头疼.
- 这不是有效的HTML5 (17认同)
- @Ethan`scroll`属性在<body>标签上无效。在我能找到的任何规格上，它都没有被列为有效。[w3schools]（https://www.w3schools.com/tags/tag_body.asp）；[MDN]（https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body）；[Quackit]（https://www.quackit.com/html_5/tags/html_body_tag.cfm） (5认同)
小智 12
这篇文章很有帮助,但只是想分享一个可以帮助他人的轻微替代方案:
设置max-height而不是height也可以.就我而言,我基于类切换禁用滚动..someContainer {height: 100%; overflow: hidden;}当容器的高度小于视口的高度时设置会拉伸容器,这可能不是您想要的.max-height为此设置帐户,但如果容器的高度大于内容更改时的视口,则仍会禁用滚动.
Mar*_*und 11
- 使用 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。
有用的链接：
- 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
小智 11
当您需要为 Web 应用程序创建弹出组件时，还有另一种方便的方法可以禁用滚动，而无需动态更改 body 元素。首先，添加此样式：
body:has(.requires-no-scroll) {
overflow: hidden;
}
然后，当您创建/打开任何弹出窗口时，只需将此类添加到其中，它的存在将自动阻止滚动（并在删除弹出窗口时取消阻止它）：
<div class="popup requires-no-scroll">
...
</div>
当您基于某些反应性布尔变量显示弹出窗口时，这对于反应式应用程序很有用：滚动本身会阻止并且您不需要执行任何其他操作。
bvd*_*vdb 10
为此，请在<body>元素上添加 2 个 CSS 属性。
body {
height: 100%;
overflow-y: hidden;
}
现在有许多新闻网站要求用户创建一个帐户。通常，他们会授予对该页面的完全访问权限大约一秒钟，然后他们会显示一个弹出窗口，并阻止用户向下滚动。
编辑
此外，一些网站（例如 Quora）也会使部分文本变得模糊。通常，他们通过应用以下 CSS 来做到这一点。
filter: blur(3px);
- @DataGeek，这不仅隐藏滚动条，还阻止向下滚动的能力。据我了解，这就是我们所要求的。即不仅隐藏它，而且使其无法向下滚动。 (2认同)