Prevent Body Scrolling
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!
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![HTML5 Context Menus]()
One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so...
![New MooTools Plugin: ElementFilter]()
My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work.
The XHTML
I've used a list for this example...
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.
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…
True, unless you have ‘Always Show Scrollbars’ turned on in general prefs or are using an external mouse
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
How would you make the body fixed and the modal window scrollable in case its content exceeds the window size?
Applying the
overflow: hiddenonbodywill prevent the whole page to scroll.Add
overflow: hidden;property on body tag and set position fixed of inner element.In 80% of cases, modal or whatever, will be called when window is somewhat scrolled from top of the page.
on body will instantly fix window on top of the page, and again, you’ll have nasty effect.
This is the problem I’m encountering, and have had no luck in finding a solution! :(
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??
Awesome
also in safari(mobile) the body keeps scrolling.
@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).
yes, just add another dependency to your project o.O
This works for desktop but not for mobile. Is there a solution?
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.
You should encounter another issue, the body scroll state is lost and page scrolls to top.
This does not work on iOS12. Add position:fixed as well for iOS12….
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.
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..