Prevent Body Scrolling

By  on  

One of my pet peeves with fixed or absolute positioned elements is the <body> scrolling while you scroll the the positioned element.  Have you ever tried scrolling a dialog and seeing the page scroll in the background?  Awful user experience, bordering on embarrassing.  Yikes.

So what's the best way to prevent the <body> scrolling in the background?  Pass on scroll events and preventDefault or stopPropagation, that wont work.  The easiest way is a simple CSS snippet:

body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}

Preventing overflow on the entire <body> assures scrolling on elements other than the desired fixed or absolute element wont happen.  It's an easy way to freeze the page for a hovered focus element.

This trick has been used forever -- make sure you keep it in your toolbox!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level.

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  1. MaxArt

    Keep in mind that overflow: hidden also hides the scrollbar. Usually not a problem on mobile, but on desktop it creates an annoying effect because it resizes the viewport.

    • David

      Except when you are on Mac, there the scrollbar lays above the page content and simple fades in and out without actually affecting the available width. Long live consistency…

    • Shawn D

      True, unless you have ‘Always Show Scrollbars’ turned on in general prefs or are using an external mouse

  2. Daniel

    Bootstrap uses this technique in theirs modals, but this is not very well supported on mobile devices:
    http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#modals-navbars-and-virtual-keyboards

  3. Onairda

    How would you make the body fixed and the modal window scrollable in case its content exceeds the window size?

    Applying the overflow: hidden on body will prevent the whole page to scroll.

  4. Add overflow: hidden; property on body tag and set position fixed of inner element.

  5. Guest

    In 80% of cases, modal or whatever, will be called when window is somewhat scrolled from top of the page.

    overflow: hidden;

    on body will instantly fix window on top of the page, and again, you’ll have nasty effect.

    • Anna

      This is the problem I’m encountering, and have had no luck in finding a solution! :(

  6. Adam

    In some cases (eg. React), you don’t want to change ‘external world’ state.

    Is there any way to prevent body from scrolling from the level of some element that is supposed to stop body scrolling without touching body element??

  7. Luca

    Awesome

  8. leny

    also in safari(mobile) the body keeps scrolling.

  9. @Adam, you can use something like https://github.com/iest/react-body-classname with React (it’s fine to change ‘external world’ state when needed).

    • lulz

      yes, just add another dependency to your project o.O

  10. Oliver

    This works for desktop but not for mobile. Is there a solution?

  11. willmcpo

    Check out https://www.npmjs.com/package/body-scroll-lock.

    Locks body scroll without locking scroll of a target element (eg. Modal) for iOS and other devices, as well as desktop browsers.

    Yes works for iOS.

    Here’s a demo: http://wp-os.s3-website-ap-southeast-2.amazonaws.com/body-scroll-lock-demo/index.html.

    You can read more about the rationale of the package at https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177.

  12. Some primate

    You should encounter another issue, the body scroll state is lost and page scrolls to top.

  13. Charles Robertson

    This does not work on iOS12. Add position:fixed as well for iOS12….

  14. James Filby

    As others have pointed out, this currently only appears to have very limited mobile support, specifically Chrome and Edge browser seem to support this behaviour, all others continue to allow the user to scroll the body.

  15. Rob

    Can anyone offer me a userscript for greasemonkey to use
    in palemoon (firefox “legacy”) that would prevent the sidebar
    history from scrolling to top each time i open portions of urls
    visited a day or more before..

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!