我想完全禁用HTML主体上的滚动。我尝试了以下几种方法:
溢出:隐藏;(不工作，没有禁用滚动，它只是隐藏滚动条) 位置:固定;(这是工作，但它完全滚动到顶部，这是不可接受的这个特定的应用程序)
我找不到这两个选项之外的其他选项，还有吗?
当前回答
设置高度和溢出:
html, body {margin: 0; height: 100%; overflow: hidden}
http://jsfiddle.net/q99hvawt/
其他回答
使用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
你为什么不试试这个:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
设置高度和溢出:
html, body {margin: 0; height: 100%; overflow: hidden}
http://jsfiddle.net/q99hvawt/
HTML css工作很好，如果主体标签不做什么，你也可以写
<body scroll="no" style="overflow: hidden">
在这种情况下，重写应该在body标签上，它更容易控制，但有时会让人头疼。
为此，在<body>元素上添加2个CSS属性。
body {
height: 100%;
overflow-y: hidden;
}
如今，许多新闻网站都要求用户创建一个账户。通常情况下，它们会让用户在一秒钟内完全访问页面，然后弹出一个窗口，阻止用户向下滚动页面。
EDIT
此外，一些网站(如Quora)也会使部分文本模糊。通常他们通过应用下面的CSS来做到这一点。
filter: blur(3px);
