Html 禁用身体滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28411499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Scrolling on Body
提问by panther
I would like to disable scrolling on the HTML bodycompletely. I have tried the following options:
我想body完全禁用 HTML 上的滚动。我尝试了以下选项：
overflow: hidden;(not working, did not disable scrolling, it just hid the scrollbar)position: fixed;(this worked, but it scrolled completely to the top, which is unacceptable for this specific application)
overflow: hidden;（不工作，没有禁用滚动，它只是隐藏了滚动条）position: fixed;（这有效，但它完全滚动到顶部，这对于此特定应用程序是不可接受的）
I was unable to find any alternatives to these two options, are there any more?
我找不到这两个选项的任何替代方案，还有其他选择吗？
回答by panther
Set heightand overflow:
设置height和overflow：
html, body {margin: 0; height: 100%; overflow: hidden}
回答by Lalo
HTML css works fine if body tag does nothing you can write as well
如果 body 标记不执行任何您可以编写的操作，则 HTML css 可以正常工作
<body scroll="no" style="overflow: hidden">
In this case overriding should be on the body tag, it is easier to control but sometimes gives headaches.
在这种情况下，覆盖应该在 body 标签上，它更容易控制，但有时会让人头疼。
回答by joebjoe
This post was helpful, but just wanted to share a slight alternative that may help others:
这篇文章很有帮助，但只是想分享一个可以帮助其他人的轻微替代方案：
Setting max-heightinstead of heightalso does the trick. In my case, I'm disabling scrolling based on a class toggle. Setting .someContainer {height: 100%; overflow: hidden;}when the container's height is smaller than that of the viewport would stretch the container, which wouldn't be what you'd want. Setting max-heightaccounts for this, but if the container's height is greater than the viewport's when the content changes, still disables scrolling.
设置max-height而不是height也可以解决问题。就我而言，我基于类切换禁用滚动。.someContainer {height: 100%; overflow: hidden;}当容器的高度小于视口的高度时设置会拉伸容器，这不是您想要的。设置会max-height考虑到这一点，但如果内容更改时容器的高度大于视口的高度，仍会禁用滚动。
回答by bvdb
To accomplish this, add 2 CSS properties on the <body>element.
为此，请在<body>元素上添加 2 个 CSS 属性。
height: 100%
overflow-y: hidden
These days there are many news websites which require users to create an account. Typically they will give full access to the page for about a second, and then they show a pop-up, and stop users from scrolling down.
现在有许多新闻网站要求用户创建一个帐户。通常，他们会授予对该页面的完全访问权限大约一秒钟，然后他们会显示一个弹出窗口，并阻止用户向下滚动。
