我想完全禁用HTML body
的滚动。 我已尝试以下选项:
overflow: hidden;
(不起作用,无法禁用滚动,它只隐藏了滚动条)position: fixed;
(这个可以工作,但它会完全滚动到顶部,对于此特定应用程序是不可接受的)
我找不到这两个选项之外的任何替代方案,还有其他方法吗?
设置 height
和 overflow
:
html, body {margin: 0; height: 100%; overflow: hidden}
height: 100vh
; ) - neox5100dvh
或其他较新的变体--有关此错误的更多信息在这里:https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/ - Swivel这篇文章非常有用,但是我想分享一种可能会帮助其他人的略微不同的方法:
与其使用 height
,使用 max-height
也可以达到同样的效果。在我的情况下,我基于类切换来禁用滚动条。当容器的高度小于视口的高度时,设置 .someContainer {height: 100%; overflow: hidden;}
会拉伸容器,这不是你想要的结果。设置 max-height
可以解决这个问题,但如果内容变化时容器的高度大于视口的高度,仍然会禁用滚动。
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
。
有用的链接:
当你需要为你的Web应用程序创建弹出式组件时,还有一种方便的方法可以禁用滚动而无需动态更改body元素。 首先,添加此样式:
body:has(.requires-no-scroll) {
overflow: hidden;
}
接下来,当你创建/打开任何弹出窗口时,只需向其添加此类,并且它的存在将自动阻止滚动(在删除弹出窗口时解除阻止):
<div class="popup requires-no-scroll">
...
</div>
当您基于一些反应性布尔变量显示弹出窗口时,这对于反应式应用程序非常有用:滚动本身被阻止,您不需要做任何其他事情。
overscroll-behavior
解决方案失败时,它起作用了。:has
在 Firefox 中仍然无法工作,但没关系。 - dakabbody, html {
overflow: hidden
}
为什么不试试这个:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
如果您可以接受页面滚动到顶部,可以这样做:
position: fixed;
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;
}
<body>
中使用height: 100%; overflow: hidden
样式。 :) - mehmet