Gossip Burst

Home / news

Disable Scrolling on Body

Matthew Underwood |

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?

4

9 Answers

Set height and overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

5

HTML css works fine if body tag does nothing you can write as well

<body scroll="no">

In this case overriding should be on the body tag, it is easier to control but sometimes gives headaches.

3

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.

1

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.

The Telegraph

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);
2
  • 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:

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.

Why don't you try this:

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

This would prevent page scroll:

body, html { overflow: hidden }

HTML

<body> .... </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; }
2

You Might Also Like