Prevent Scrolling Behind a Fixed Overlay and Maintain Scroll Position on Mobile Devices

Est. Read Time: ~Less Than a Minute

This is a great piece of code if you need to have an overlay on a mobile device and do not want the background to scroll when you have to interact with the overlay.

The below is an example of the javascript. You can change the ‘getElementById’ name to fit with your overlay ID name in the code below, add -webkit-overflow-scrolling: touch; to the #overlay or ID element of your code, and that’s all there is to it.

Example:

Source: Stackoverflow

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
Load More Posts