iOS disable body scroll

disableBodyScroll.js

/**
 * Prevent body scroll and overscroll.
 * Tested on mac, iOS chrome / Safari, Android Chrome.
 *
 * Based on: https://benfrain.com/preventing-body-scroll-for-modals-in-ios/
 *           https://stackoverflow.com/a/41601290
 *
 * Use in combination with:
 * html, body {overflow: hidden;}
 *
 * and: -webkit-overflow-scrolling: touch; for the element that should scroll.
 *
 * disableBodyScroll(true, '.i-can-scroll');
 */
var disableBodyScroll = (function () {

    /**
     * Private variables
     */
    var _selector = false,
        _element = false,
        _clientY;

    /**
     * Polyfills for Element.matches and Element.closest
     */
    if (!Element.prototype.matches)
        Element.prototype.matches = Element.prototype.msMatchesSelector ||
        Element.prototype.webkitMatchesSelector;

    if (!Element.prototype.closest)
        Element.prototype.closest = function (s) {
            var ancestor = this;
            if (!document.documentElement.contains(el)) return null;
            do {
                if (ancestor.matches(s)) return ancestor;
                ancestor = ancestor.parentElement;
            } while (ancestor !== null);
            return el;
        };

    /**
     * Prevent default unless within _selector
     * 
     * @param  event object event
     * @return void
     */
    var preventBodyScroll = function (event) {
        if (false === _element || !event.target.closest(_selector)) {
            event.preventDefault();
        }
    };

    /**
     * Cache the clientY co-ordinates for
     * comparison
     * 
     * @param  event object event
     * @return void
     */
    var captureClientY = function (event) {
        // only respond to a single touch
        if (event.targetTouches.length === 1) { 
            _clientY = event.targetTouches[0].clientY;
        }
    };

    /**
     * Detect whether the element is at the top
     * or the bottom of their scroll and prevent
     * the user from scrolling beyond
     * 
     * @param  event object event
     * @return void
     */
    var preventOverscroll = function (event) {
        // only respond to a single touch
	    if (event.targetTouches.length !== 1) {
	    	return;
	    }

	    var clientY = event.targetTouches[0].clientY - _clientY;

	    // The element at the top of its scroll,
	    // and the user scrolls down
	    if (_element.scrollTop === 0 && clientY > 0) {
	        event.preventDefault();
	    }

	    // The element at the bottom of its scroll,
	    // and the user scrolls up
		// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
		if ((_element.scrollHeight - _element.scrollTop <= _element.clientHeight) && clientY < 0) {
	        event.preventDefault();
	    }

    };

    /**
     * Disable body scroll. Scrolling with the selector is
     * allowed if a selector is porvided.
     * 
     * @param  boolean allow
     * @param  string selector Selector to element to change scroll permission
     * @return void
     */
    return function (allow, selector) {
    	if (typeof selector !== "undefined") {
	        _selector = selector;
	        _element = document.querySelector(selector);
    	}

        if (true === allow) {
        	if (false !== _element) {
	            _element.addEventListener('touchstart', captureClientY, false);
	            _element.addEventListener('touchmove', preventOverscroll, false);
        	}
            document.body.addEventListener("touchmove", preventBodyScroll, false);
        } else {
        	if (false !== _element) {
	            _element.removeEventListener('touchstart', captureClientY, false);
	            _element.removeEventListener('touchmove', preventOverscroll, false);
	        }
            document.body.removeEventListener("touchmove", preventBodyScroll, false);
        }
    };
}());

Have a look at: https://codepen.io/thuijssoon/pen/prwNjO for a demo.

Have you tested this on Safari for iPad? It doesn't prevent background scroll.

It's definitely working on Safari for iPad. Tested on simulator and real iPad.

Hi :),

This sseems to be working quite well, thanks for the code! However , while this work properly if the modal/drawer has enough content to scroll, if there is nothing to scroll, touching still move the body. Is there a way to solve this issue?

Thanks!

Hi!,

Your script is working perfectly for me, except that the overscroll to the top is not working anymore. Is there anyway to still enable this, while still preventing the scroll of the body?

Maybe we can get in contact about this :)

Thanks!

Not working on iOS 11.3 :(

Per @jonlozano,
There is a fix here:
https://stackoverflow.com/questions/49500339/cant-prevent-touchmove-from-scrolling-window-on-ios

The code will need to be updated for this change.

Make sure you use 100% instead of 100vh on your modal related elements, this was causing one of our menus to inherit strange scrolling behaviour while allowing body scrolls. 1vh != 1% of viewport on Safari!

Thanks for sharing this. There's an error with the Element.prototype.closest polyfill which is missing the actual "el" variable definition and this generates an error in IE. I believe the correct code would look like this:

		if (!Element.prototype.closest)
		    Element.prototype.closest = function(s) {
		        var el = this;
		        if (!document.documentElement.contains(el)) return null;
		        do {
		            if (el.matches(s)) return el;
		            el = el.parentElement || el.parentNode;
		        } while (el !== null && el.nodeType === 1); 
		        return null;
		    };

Thanks for inspiration, this is the simplest and working solution for me!