/** | |
* 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); | |
} | |
}; | |
}()); |
This comment has been minimized.
This comment has been minimized.
Have you tested this on Safari for iPad? It doesn't prevent background scroll. |
This comment has been minimized.
This comment has been minimized.
It's definitely working on Safari for iPad. Tested on simulator and real iPad. |
This comment has been minimized.
This comment has been minimized.
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! |
This comment has been minimized.
This comment has been minimized.
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! |
This comment has been minimized.
This comment has been minimized.
Not working on iOS 11.3 :( |
This comment has been minimized.
This comment has been minimized.
Per @jonlozano, The code will need to be updated for this change. |
This comment has been minimized.
This comment has been minimized.
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! |
This comment has been minimized.
This comment has been minimized.
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:
|
This comment has been minimized.
This comment has been minimized.
Thanks for inspiration, this is the simplest and working solution for me! |
This comment has been minimized.
This comment has been minimized.
Does this work now? I can't get it to work on my iPhone. iOS 13.3. |
This comment has been minimized.
Have a look at: https://codepen.io/thuijssoon/pen/prwNjO for a demo.