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);

• 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 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;
    }