From 62351447d656b0b48e4e8ed3c7bb5529a7309b4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yanick=20B=C3=A9langer?= Date: Wed, 4 May 2022 13:49:47 -0400 Subject: [PATCH 1/2] fix: added missing CSS unit (#1) --- lib/bodyScrollLock.es6.js | 2 +- lib/bodyScrollLock.esm.js | 2 +- lib/bodyScrollLock.js | 2 +- lib/bodyScrollLock.min.js | 2 +- src/bodyScrollLock.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/bodyScrollLock.es6.js b/lib/bodyScrollLock.es6.js index fa4f42b9..52b05855 100644 --- a/lib/bodyScrollLock.es6.js +++ b/lib/bodyScrollLock.es6.js @@ -113,7 +113,7 @@ const setPositionFixed = () => window.requestAnimationFrame(() => { const 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); + document.body.style.top = `-${scrollY + bottomBarHeight}px`; } }), 300); } diff --git a/lib/bodyScrollLock.esm.js b/lib/bodyScrollLock.esm.js index 23518372..6d3df141 100644 --- a/lib/bodyScrollLock.esm.js +++ b/lib/bodyScrollLock.esm.js @@ -121,7 +121,7 @@ var setPositionFixed = function setPositionFixed() { 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); + document.body.style.top = '-' + (scrollY + bottomBarHeight) + 'px'; } }); }, 300); diff --git a/lib/bodyScrollLock.js b/lib/bodyScrollLock.js index a8dfa1f1..653fc0e8 100644 --- a/lib/bodyScrollLock.js +++ b/lib/bodyScrollLock.js @@ -150,7 +150,7 @@ 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); + document.body.style.top = '-' + (scrollY + bottomBarHeight) + 'px'; } }); }, 300); diff --git a/lib/bodyScrollLock.min.js b/lib/bodyScrollLock.min.js index c2f200f5..7a2c1b78 100644 --- a/lib/bodyScrollLock.min.js +++ b/lib/bodyScrollLock.min.js @@ -1 +1 @@ -!function(e,o){if("function"==typeof define&&define.amd)define(["exports"],o);else if("undefined"!=typeof exports)o(exports);else{var t={};o(t),e.bodyScrollLock=t}}(this,function(exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=!1;if("undefined"!=typeof window){var e={get passive(){t=!0}};window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}function d(o){return s.some(function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(o))})}function l(e){var o=e||window.event;return!!d(o.target)||(1 window.requestAnimationFrame(() => { const 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); + document.body.style.top = `-${scrollY + bottomBarHeight}px`; } }), 300) } From 557beeed474e86a33534b72c895098935ee3615d Mon Sep 17 00:00:00 2001 From: "p.b" <1430300+pbt@users.noreply.github.com> Date: Thu, 20 Oct 2022 13:06:11 -0400 Subject: [PATCH 2/2] fix: Target window.top.document.body; remove code for adjusting viewport changes (#2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Change the target to document.body ➡️ window.top.document.body. (In non-iframe situations window.top resolves to window.) This is because in certain situations we might want to invoke the body scroll lock while inside of an iframe and want to make sure locking extends beyond the iframe. 2. Remove the code that adjusts for viewport changes. While debugging this library I found that this passage of code that attempts to adjust for viewport changes did not work (it was causing the top value to be unset, meaning scroll position was not preserved). I don't think that it ought to be the responsibility of this library to adjust for viewport changes; it should just be to apply a body scroll lock. If they need to, consumers can adjust by listening to changes in visualViewport or using the new CSS display viewport dimensions. --- src/bodyScrollLock.js | 45 +++++++++++++++++-------------------------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/src/bodyScrollLock.js b/src/bodyScrollLock.js index a2cdf5d8..9604813b 100644 --- a/src/bodyScrollLock.js +++ b/src/bodyScrollLock.js @@ -76,22 +76,22 @@ const setOverflowHidden = (options?: BodyScrollOptions) => { const scrollBarGap = window.innerWidth - document.documentElement.clientWidth; if (reserveScrollBarGap && scrollBarGap > 0) { - const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10); - previousBodyPaddingRight = document.body.style.paddingRight; - document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`; + const computedBodyPaddingRight = parseInt(window.getComputedStyle(window.top.document.body).getPropertyValue('padding-right'), 10); + previousBodyPaddingRight = window.top.document.body.style.paddingRight; + window.top.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'; + previousBodyOverflowSetting = window.top.document.body.style.overflow; + window.top.document.body.style.overflow = 'hidden'; } }; const restoreOverflowSetting = () => { if (previousBodyPaddingRight !== undefined) { - document.body.style.paddingRight = previousBodyPaddingRight; + window.top.document.body.style.paddingRight = previousBodyPaddingRight; // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it // can be set again. @@ -99,7 +99,7 @@ const restoreOverflowSetting = () => { } if (previousBodyOverflowSetting !== undefined) { - document.body.style.overflow = previousBodyOverflowSetting; + window.top.document.body.style.overflow = previousBodyOverflowSetting; // Restore previousBodyOverflowSetting to undefined // so setOverflowHidden knows it can be set again. @@ -111,38 +111,29 @@ const setPositionFixed = () => window.requestAnimationFrame(() => { // 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 + position: window.top.document.body.style.position, + top: window.top.document.body.style.top, + left: window.top.document.body.style.left }; // Update the dom inside an animation frame const { scrollY, scrollX, innerHeight } = window; - document.body.style.position = 'fixed'; - document.body.style.top = `${-scrollY}px`; - document.body.style.left = `${-scrollX}px`; - - setTimeout(() => window.requestAnimationFrame(() => { - // Attempt to check if the bottom bar appeared due to the position change - const 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}px`; - } - }), 300) + window.top.document.body.style.position = 'fixed'; + window.top.document.body.style.top = `${-scrollY}px`; + window.top.document.body.style.left = `${-scrollX}px`; } }); const restorePositionSetting = () => { if (previousBodyPosition !== undefined) { // Convert the position from "px" to Int - const y = -parseInt(document.body.style.top, 10); - const x = -parseInt(document.body.style.left, 10); + const y = -parseInt(window.top.document.body.style.top, 10); + const x = -parseInt(window.top.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; + window.top.document.body.style.position = previousBodyPosition.position; + window.top.document.body.style.top = previousBodyPosition.top; + window.top.document.body.style.left = previousBodyPosition.left; // Restore scroll window.scrollTo(x, y);