function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } // Older browsers don't support event options, feature detect it. // Adopted and modified solution from Bohdan Didukh (2017) // https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi var hasPassiveEvents = false; if (typeof window !== 'undefined') { var passiveTestOptions = { get passive() { hasPassiveEvents = true; return undefined; } }; window.addEventListener('testPassive', null, passiveTestOptions); window.removeEventListener('testPassive', null, passiveTestOptions); } var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1); var locks = []; var documentListenerAdded = false; var initialClientY = -1; var previousBodyOverflowSetting = void 0; var previousBodyPosition = void 0; var previousBodyPaddingRight = void 0; // returns true if `el` should be allowed to receive touchmove events. var allowTouchMove = function allowTouchMove(el) { return locks.some(function (lock) { if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) { return true; } return false; }); }; var preventDefault = function preventDefault(rawEvent) { var e = rawEvent || window.event; // For the case whereby consumers adds a touchmove event listener to document. // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false }) // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then // the touchmove event on document will break. if (allowTouchMove(e.target)) { return true; } // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom). if (e.touches.length > 1) return true; if (e.preventDefault) e.preventDefault(); return false; }; var setOverflowHidden = function setOverflowHidden(options) { // If previousBodyPaddingRight is already set, don't set it again. if (previousBodyPaddingRight === undefined) { var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true; var scrollBarGap = window.innerWidth - document.documentElement.clientWidth; if (_reserveScrollBarGap && scrollBarGap > 0) { var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10); previousBodyPaddingRight = document.body.style.paddingRight; document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px'; } } // If previousBodyOverflowSetting is already set, don't set it again. if (previousBodyOverflowSetting === undefined) { previousBodyOverflowSetting = document.body.style.overflow; document.body.style.overflow = 'hidden'; } }; var restoreOverflowSetting = function restoreOverflowSetting() { if (previousBodyPaddingRight !== undefined) { document.body.style.paddingRight = previousBodyPaddingRight; // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it // can be set again. previousBodyPaddingRight = undefined; } if (previousBodyOverflowSetting !== undefined) { document.body.style.overflow = previousBodyOverflowSetting; // Restore previousBodyOverflowSetting to undefined // so setOverflowHidden knows it can be set again. previousBodyOverflowSetting = undefined; } }; var setPositionFixed = function setPositionFixed() { return window.requestAnimationFrame(function () { // If previousBodyPosition is already set, don't set it again. if (previousBodyPosition === undefined) { previousBodyPosition = { position: document.body.style.position, top: document.body.style.top, left: document.body.style.left }; // Update the dom inside an animation frame var _window = window, scrollY = _window.scrollY, scrollX = _window.scrollX, innerHeight = _window.innerHeight; document.body.style.position = 'fixed'; document.body.style.top = -scrollY; document.body.style.left = -scrollX; setTimeout(function () { return window.requestAnimationFrame(function () { // Attempt to check if the bottom bar appeared due to the position change var bottomBarHeight = innerHeight - window.innerHeight; if (bottomBarHeight && scrollY >= innerHeight) { // Move the content further up so that the bottom bar doesn't hide it document.body.style.top = -(scrollY + bottomBarHeight); } }); }, 300); } }); }; var restorePositionSetting = function restorePositionSetting() { if (previousBodyPosition !== undefined) { // Convert the position from "px" to Int var y = -parseInt(document.body.style.top, 10); var x = -parseInt(document.body.style.left, 10); // Restore styles document.body.style.position = previousBodyPosition.position; document.body.style.top = previousBodyPosition.top; document.body.style.left = previousBodyPosition.left; // Restore scroll window.scrollTo(x, y); previousBodyPosition = undefined; } }; // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) { return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false; }; var handleScroll = function handleScroll(event, targetElement) { var clientY = event.targetTouches[0].clientY - initialClientY; if (allowTouchMove(event.target)) { return false; } if (targetElement && targetElement.scrollTop === 0 && clientY > 0) { // element is at the top of its scroll. return preventDefault(event); } if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) { // element is at the bottom of its scroll. return preventDefault(event); } event.stopPropagation(); return true; }; export var disableBodyScroll = function disableBodyScroll(targetElement, options) { // targetElement must be provided if (!targetElement) { // eslint-disable-next-line no-console console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'); return; } // disableBodyScroll must not have been called on this targetElement before if (locks.some(function (lock) { return lock.targetElement === targetElement; })) { return; } var lock = { targetElement: targetElement, options: options || {} }; locks = [].concat(_toConsumableArray(locks), [lock]); if (isIosDevice) { setPositionFixed(); } else { setOverflowHidden(options); } if (isIosDevice) { targetElement.ontouchstart = function (event) { if (event.targetTouches.length === 1) { // detect single touch. initialClientY = event.targetTouches[0].clientY; } }; targetElement.ontouchmove = function (event) { if (event.targetTouches.length === 1) { // detect single touch. handleScroll(event, targetElement); } }; if (!documentListenerAdded) { document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); documentListenerAdded = true; } } }; export var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() { if (isIosDevice) { // Clear all locks ontouchstart/ontouchmove handlers, and the references. locks.forEach(function (lock) { lock.targetElement.ontouchstart = null; lock.targetElement.ontouchmove = null; }); if (documentListenerAdded) { document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); documentListenerAdded = false; } // Reset initial clientY. initialClientY = -1; } if (isIosDevice) { restorePositionSetting(); } else { restoreOverflowSetting(); } locks = []; }; export var enableBodyScroll = function enableBodyScroll(targetElement) { if (!targetElement) { // eslint-disable-next-line no-console console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'); return; } locks = locks.filter(function (lock) { return lock.targetElement !== targetElement; }); if (isIosDevice) { targetElement.ontouchstart = null; targetElement.ontouchmove = null; if (documentListenerAdded && locks.length === 0) { document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); documentListenerAdded = false; } } if (isIosDevice) { restorePositionSetting(); } else { restoreOverflowSetting(); } };