Disable Scrolling on Body
HtmlCssScrollHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
Set height and overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
Solution 2 - Html
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.
Solution 3 - Html
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.
Solution 4 - Html
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);
Solution 5 - Html
- Using React >= 17.8?
- Want to do this conditionally?
useEffect to the rescue!
function useImperativeDisableScroll({ element, disabled }) {
useEffect(() => {
if (!element) {
return
}
element.style.overflowY = disabled ? 'hidden' : 'scroll'
return () => {
element.style.overflowY = 'scroll'
}
}, [disabled])
}
You could use this with e.g.
useImperativeDisableScroll({ element: document.body, disabled: true })
Depending on your use case, you may have better luck with
useImperativeDisableScroll({
element: document.scrollingElement,
disabled: true
})
Note however that at time of writing, you might have to polyfill document.scrollingElement.
Useful links:
Solution 6 - Html
Why don't you try this:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
Solution 7 - Html
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;
}
Solution 8 - Html
If you're ok with the page scrolling to the top. you can do:
position: fixed;
on the element you don't want to be scrollable. I know it's not the answer you wanted but I'm answering the title directly for those who Googled for this issue.
Solution 9 - Html
This would prevent page scroll:
body, html {
overflow: hidden
}