Disable Scrolling on Body

html css scroll

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?

for which element did you apply overflow:hidden ?

What exactly are you trying to achieve here? What's your end goal?

Showing relevant code will make it easier to help you.

overflow: hidden; is the way to go. If it's not working you have some other problem in your css. Try html, body {overflow: hidden;} if this doesn't work try * {overflow: hidden;} and try figuring out what is wrong

pavel

Set height and overflow:

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

http://jsfiddle.net/q99hvawt/

forgot about "html, " before "body.

Not working on iOS when you have a overlay element that has fixed position.

You could just add the "overflow":"hidden" and it will work fine.

This solution did not immediately work for me, but after inspection "margin" was being overridden somewhere. Setting that element's "margin: 0;" did the trick.

Sometimes you would prefer using height: 100vh ; )

IKavanagh

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 is not valid HTML5

@mbomb007 Can you please comment on the mistake here related to HTML5?

@Ethan The scroll attribute is not valid on the <body> tag. It's not listed as valid on any spec I can find. w3schools; MDN; Quackit

joebjoe

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.

this saved my day for desktop browsers without unwanted side effect of scroll-top-top. but didn't work on mobile browsers (iphone5s and android).

bvdb

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.

https://i.stack.imgur.com/0Z2cs.png

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

this hides the scrollbar. However, the question is specifically asking for an alternative to hiding the scrollbar

@DataGeek , this does not only hide the scrollbar, it also stops the ability to scroll down. And as I understand that is what was asked for. i.e. not just hiding it, but also making it impossible to scroll down.

Martin Grönlund

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:

https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement

https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement

https://caniuse.com/document-scrollingelement

https://github.com/yangg/scrolling-element

Maizied Hasan Shuvo

Why don't you try this:

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

Embedded_Mugs

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.

Sharhabeel Hamdan

This would prevent page scroll:

body, html {
  overflow: hidden
}

Anup Bangale

HTML

<body id="appBody">
....
</body>

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

bbc seems to use some combo of above can be made viewable by setting something like height: 200vh; max-height: 200vh; overflow: auto; on the main element. It's not obvious how they actually prevent the scroll. e.g. bbc.co.uk/news/uk-england-tyne-58925807

Can also be circumvented by disabling javascript

Disable Scrolling on Body

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US