Disable Scrolling on Body
I would like to disable scrolling on the HTML body completely. I have tried the following options:
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)
I was unable to find any alternatives to these two options, are there any more?
Set height and overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
http://jsfiddle.net/q99hvawt/
HTML css works fine if body tag does nothing you can write as well
<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.
This post was helpful, but just wanted to share a slight alternative that may help others:
Setting max-height instead of height also 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-height accounts for this, but if the container's height is greater than the viewport's when the content changes, still disables scrolling.
To accomplish this, add 2 CSS properties on the <body> element.
body {
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.
EDIT
In addition, some websites (e.g. Quora) also make portions of text blurry. In general they do this by applying the following CSS.
filter: blur(3px);