禁用身体滚动

我想完全禁用HTML body上的滚动。我尝试了以下几种方法:

  • overflow: hidden;(不工作，没有禁用滚动，它只是隐藏滚动条)

  • position: fixed;(这工作，但它完全滚动到顶部，这是不可接受的这个特定的应用程序)

我找不到这两个选项之外的其他选项，还有吗?

780317 次浏览
小开
最佳答案

设置height和overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/ < a href = " http://jsfiddle.net/q99hvawt/ " > < / >

小开

HTML css工作很好，如果主体标签不做什么，你也可以写

<body scroll="no" style="overflow: hidden">

在这种情况下，重写应该在body标签上，它更容易控制，但有时会让人头疼。

小开

这篇文章很有帮助，但我只是想分享一个可以帮助其他人的小方法:

设置max-height而不是height也可以。在我的例子中，我基于类切换禁用滚动。当容器的高度小于视口的高度时设置.someContainer {height: 100%; overflow: hidden;}会拉伸容器，这不是你想要的。设置max-height说明了这一点，但是如果容器的高度在内容更改时大于视口的高度，则仍然禁用滚动。

小开

为此，在<body>元素上添加2个CSS属性。

body {
height: 100%;
overflow-y: hidden;
}

如今，许多新闻网站都要求用户创建一个账户。通常情况下，它们会让用户在一秒钟内完全访问页面，然后弹出一个窗口，阻止用户向下滚动页面。

The Telegraph .

< h1 id =“编辑- 897 k”>编辑< / h1 >

此外，一些网站(如Quora)也会使部分文本模糊。通常他们通过应用下面的CSS来做到这一点。

filter: blur(3px);
小开
  • 使用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。

有用的链接:

小开

超文本标记语言

<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;
}
小开

如果你不介意页面滚动到顶部的话。你可以:

position: fixed;

在你不想滚动的元素上。我知道这不是你想要的答案，但我直接回答了那些谷歌这个问题的人。

小开

你为什么不试试这个:

<style type="text/css">
html, body {
overflow: hidden;
}
</style>
小开

这将阻止页面滚动:

body, html {
overflow: hidden
}

提交答案