body-scroll-lock - npm Package Compare versions

Comparing version 3.1.5 to 4.0.0-beta.0

lib/bodyScrollLock.es6.js

@@ -27,2 +27,3 @@
 let previousBodyOverflowSetting;
+let previousBodyPosition;
 let previousBodyPaddingRight;
@@ -65,4 +66,5 @@
     if (reserveScrollBarGap && scrollBarGap > 0) {
+      const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
       previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = `${scrollBarGap}px`;
+      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
     }
@@ -96,2 +98,46 @@ }
 
+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
+    };
+
+    // Update the dom inside an animation frame 
+    const { scrollY, scrollX, innerHeight } = window;
+    document.body.style.position = 'fixed';
+    document.body.style.top = -scrollY;
+    document.body.style.left = -scrollX;
+
+    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);
+      }
+    }), 300);
+  }
+});
+
+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);
+
+    // 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
@@ -142,2 +188,8 @@ const isTargetElementTotallyScrolled = targetElement => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
   if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+
+  if (isIosDevice) {
     targetElement.ontouchstart = event => {
@@ -160,4 +212,2 @@ if (event.targetTouches.length === 1) {
     }
-  } else {
-    setOverflowHidden(options);
   }
@@ -181,2 +231,6 @@ };
     initialClientY = -1;
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
   } else {
@@ -206,3 +260,7 @@ restoreOverflowSetting();
     }
-  } else if (!locks.length) {
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
     restoreOverflowSetting();
@@ -209,0 +267,0 @@ }

lib/bodyScrollLock.esm.js

@@ -27,2 +27,3 @@ 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); } }
 var previousBodyOverflowSetting = void 0;
+var previousBodyPosition = void 0;
 var previousBodyPaddingRight = void 0;
@@ -67,4 +68,5 @@
     if (_reserveScrollBarGap && scrollBarGap > 0) {
+      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
       previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = scrollBarGap + 'px';
+      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
     }
@@ -98,2 +100,54 @@ }
 
+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
@@ -148,2 +202,8 @@ var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
   if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+
+  if (isIosDevice) {
     targetElement.ontouchstart = function (event) {
@@ -166,4 +226,2 @@ if (event.targetTouches.length === 1) {
     }
-  } else {
-    setOverflowHidden(options);
   }
@@ -187,2 +245,6 @@ };
     initialClientY = -1;
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
   } else {
@@ -214,3 +276,7 @@ restoreOverflowSetting();
     }
-  } else if (!locks.length) {
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
     restoreOverflowSetting();
@@ -217,0 +283,0 @@ }

lib/bodyScrollLock.js

@@ -56,2 +56,3 @@ (function (global, factory) {
   var previousBodyOverflowSetting = void 0;
+  var previousBodyPosition = void 0;
   var previousBodyPaddingRight = void 0;
@@ -96,4 +97,5 @@
       if (_reserveScrollBarGap && scrollBarGap > 0) {
+        var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
         previousBodyPaddingRight = document.body.style.paddingRight;
-        document.body.style.paddingRight = scrollBarGap + 'px';
+        document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
       }
@@ -127,2 +129,54 @@ }
 
+  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
@@ -177,2 +231,8 @@ var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
     if (isIosDevice) {
+      setPositionFixed();
+    } else {
+      setOverflowHidden(options);
+    }
+
+    if (isIosDevice) {
       targetElement.ontouchstart = function (event) {
@@ -195,4 +255,2 @@ if (event.targetTouches.length === 1) {
       }
-    } else {
-      setOverflowHidden(options);
     }
@@ -216,2 +274,6 @@ };
       initialClientY = -1;
+    }
+
+    if (isIosDevice) {
+      restorePositionSetting();
     } else {
@@ -243,3 +305,7 @@ restoreOverflowSetting();
       }
-    } else if (!locks.length) {
+    }
+
+    if (isIosDevice) {
+      restorePositionSetting();
+    } else {
       restoreOverflowSetting();
@@ -246,0 +312,0 @@ }

lib/bodyScrollLock.min.js

@@ -1,1 +0,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 l(o){return c.some(function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(o))})}function d(e){var o=e||window.event;return!!l(o.target)||(1<o.touches.length||(o.preventDefault&&o.preventDefault(),!1))}function n(){void 0!==v&&(document.body.style.paddingRight=v,v=void 0),void 0!==s&&(document.body.style.overflow=s,s=void 0)}var i="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&1<window.navigator.maxTouchPoints),c=[],a=!1,u=-1,s=void 0,v=void 0;exports.disableBodyScroll=function(r,e){if(r){if(!c.some(function(e){return e.targetElement===r})){var o={targetElement:r,options:e||{}};c=[].concat(function(e){if(Array.isArray(e)){for(var o=0,t=Array(e.length);o<e.length;o++)t[o]=e[o];return t}return Array.from(e)}(c),[o]),i?(r.ontouchstart=function(e){1===e.targetTouches.length&&(u=e.targetTouches[0].clientY)},r.ontouchmove=function(e){var o,t,n,i;1===e.targetTouches.length&&(t=r,i=(o=e).targetTouches[0].clientY-u,l(o.target)||(t&&0===t.scrollTop&&0<i||(n=t)&&n.scrollHeight-n.scrollTop<=n.clientHeight&&i<0?d(o):o.stopPropagation()))},a||(document.addEventListener("touchmove",d,t?{passive:!1}:void 0),a=!0)):function(e){if(void 0===v){var o=!!e&&!0===e.reserveScrollBarGap,t=window.innerWidth-document.documentElement.clientWidth;o&&0<t&&(v=document.body.style.paddingRight,document.body.style.paddingRight=t+"px")}void 0===s&&(s=document.body.style.overflow,document.body.style.overflow="hidden")}(e)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},exports.clearAllBodyScrollLocks=function(){i?(c.forEach(function(e){e.targetElement.ontouchstart=null,e.targetElement.ontouchmove=null}),a&&(document.removeEventListener("touchmove",d,t?{passive:!1}:void 0),a=!1),u=-1):n(),c=[]},exports.enableBodyScroll=function(o){o?(c=c.filter(function(e){return e.targetElement!==o}),i?(o.ontouchstart=null,o.ontouchmove=null,a&&0===c.length&&(document.removeEventListener("touchmove",d,t?{passive:!1}:void 0),a=!1)):c.length||n()):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")}});
+!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)}var n="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&1<window.navigator.maxTouchPoints),i=[],d=!1,l=-1,c=void 0,s=void 0,u=void 0,a=function(o){return i.some(function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(o))})},v=function(e){var o=e||window.event;return!!a(o.target)||(1<o.touches.length||(o.preventDefault&&o.preventDefault(),!1))},r=function(){void 0!==u&&(document.body.style.paddingRight=u,u=void 0),void 0!==c&&(document.body.style.overflow=c,c=void 0)},f=function(){if(void 0!==s){var e=-parseInt(document.body.style.top,10),o=-parseInt(document.body.style.left,10);document.body.style.position=s.position,document.body.style.top=s.top,document.body.style.left=s.left,window.scrollTo(o,e),s=void 0}};exports.disableBodyScroll=function(r,e){if(r){if(!i.some(function(e){return e.targetElement===r})){var o={targetElement:r,options:e||{}};i=[].concat(function(e){if(Array.isArray(e)){for(var o=0,t=Array(e.length);o<e.length;o++)t[o]=e[o];return t}return Array.from(e)}(i),[o]),n?window.requestAnimationFrame(function(){if(void 0===s){s={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var e=window,o=e.scrollY,t=e.scrollX,n=e.innerHeight;document.body.style.position="fixed",document.body.style.top=-o,document.body.style.left=-t,setTimeout(function(){return window.requestAnimationFrame(function(){var e=n-window.innerHeight;e&&n<=o&&(document.body.style.top=-(o+e))})},300)}}):function(e){if(void 0===u){var o=!!e&&!0===e.reserveScrollBarGap,t=window.innerWidth-document.documentElement.clientWidth;if(o&&0<t){var n=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);u=document.body.style.paddingRight,document.body.style.paddingRight=n+t+"px"}}void 0===c&&(c=document.body.style.overflow,document.body.style.overflow="hidden")}(e),n&&(r.ontouchstart=function(e){1===e.targetTouches.length&&(l=e.targetTouches[0].clientY)},r.ontouchmove=function(e){var o,t,n,i;1===e.targetTouches.length&&(t=r,i=(o=e).targetTouches[0].clientY-l,!a(o.target)&&(t&&0===t.scrollTop&&0<i?v(o):(n=t)&&n.scrollHeight-n.scrollTop<=n.clientHeight&&i<0?v(o):o.stopPropagation()))},d||(document.addEventListener("touchmove",v,t?{passive:!1}:void 0),d=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},exports.clearAllBodyScrollLocks=function(){n&&(i.forEach(function(e){e.targetElement.ontouchstart=null,e.targetElement.ontouchmove=null}),d&&(document.removeEventListener("touchmove",v,t?{passive:!1}:void 0),d=!1),l=-1),n?f():r(),i=[]},exports.enableBodyScroll=function(o){o?(i=i.filter(function(e){return e.targetElement!==o}),n&&(o.ontouchstart=null,o.ontouchmove=null,d&&0===i.length&&(document.removeEventListener("touchmove",v,t?{passive:!1}:void 0),d=!1)),n?f():r()):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")}});

package.json

 {
   "name": "body-scroll-lock",
-  "version": "3.1.5",
+  "version": "4.0.0-beta.0",
   "description": "Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus)",
@@ -5,0 +5,0 @@ "main": "lib/bodyScrollLock.min.js",

README.md

@@ -168,2 +168,51 @@ <p align="left"> <img width="675" src="https://raw.githubusercontent.com/willmcpo/body-scroll-lock/master/images/logo.png" alt="Body scroll lock...just works with everything ;-)" /> </p>
 
+
+##### Angular
+
+```javascript
+import { Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
+
+// 1. Import the functions
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+  clearAllBodyScrollLocks
+} from "body-scroll-lock";
+
+@Component({
+  selector: "app-scroll-block",
+  templateUrl: "./scroll-block.component.html",
+  styleUrls: ["./scroll-block.component.css"]
+})
+export class SomeComponent implements OnDestroy {
+  // 2. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
+  // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
+  // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
+  @ViewChild("scrollTarget") scrollTarget: ElementRef;
+
+  showTargetElement() {
+    // ... some logic to show target element
+
+    // 3. Disable body scroll
+    disableBodyScroll(this.scrollTarget.nativeElement);
+  }
+  
+  hideTargetElement() {
+    // ... some logic to hide target element
+
+    // 4. Re-enable body scroll
+    enableBodyScroll(this.scrollTarget.nativeElement);
+  }
+
+  ngOnDestroy() {
+    // 5. Useful if we have called disableBodyScroll for multiple target elements,
+    // and we just want a kill-switch to undo all that.
+    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
+    // clicks a link which takes him/her to a different page within the app.
+    clearAllBodyScrollLocks();
+  }
+}
+
+```
+
 ##### Vanilla JS
@@ -170,0 +219,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46288

increased by22.47%

Lines of code

703

increased by29.7%

Number of lines in readme file

337

increased by17.01%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes