Maintaining Scroll Position on Mobile Devices

By Zedric Myers | Published April 4, 2017 | Categories: Web Development

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:

(function () {

var _overlay = document.getElementById('overlay');

var _clientY = null; // remember Y position on touch start

_overlay.addEventListener('touchstart', function (event) {

if (event.targetTouches.length === 1) {

// detect single touch

_clientY = event.targetTouches[0].clientY;

}

}, false);

_overlay.addEventListener('touchmove', function (event) {

if (event.targetTouches.length === 1) {

// detect single touch

disableRubberBand(event);

}

}, false);

function disableRubberBand(event) {

var clientY = event.targetTouches[0].clientY - _clientY;

if (_overlay.scrollTop === 0 &amp;&amp; clientY &gt; 0) {

// element is at the top of its scroll

event.preventDefault();

}

if (isOverlayTotallyScrolled() &amp;&amp; clientY &lt; 0) {

//element is at the top of its scroll

event.preventDefault();

}

}

function isOverlayTotallyScrolled() {

// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions

return _overlay.scrollHeight - _overlay.scrollTop &lt;= _overlay.clientHeight;

}

}())

Source: Stackoverflow

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

Recent Posts

Let's get to work!