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

溢出:隐藏;(不工作,没有禁用滚动,它只是隐藏滚动条) 位置:固定;(这是工作,但它完全滚动到顶部,这是不可接受的这个特定的应用程序)

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


当前回答

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

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

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

其他回答

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>元素上添加2个CSS属性。

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

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

EDIT

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

filter: blur(3px);

这将阻止页面滚动:

body, html {
  overflow: hidden
}

你为什么不试试这个:

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

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

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