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?
The answer is
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.
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.
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.
Source: Stackoverflow.com