Merge pull request #17 from rick-liruixin/develop

optimization：document.documentElement.clientWidth -> document.documen…
rick-liruixin · Dec 1, 2023 · 6b5f6b5 · 6b5f6b5
2 parents 5044494 + 10bfd26
commit 6b5f6b5
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 102 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+PUBLISH-ME.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # body-scroll-lock-upgrade
 
+## 1.1.0
+
+### Minor Changes
+
+- optimization：document.documentElement.clientWidth -> document.documentElement.getBoundingClientRect().width
+  https://github.com/rick-liruixin/body-scroll-lock-upgrade/issues/16
+
 ## 1.0.4
 
 ### Patch Changes

diff --git a/PUBLISH-ME.md b/PUBLISH-ME.md
@@ -0,0 +1,15 @@
+# body-scroll-lock-upgrade发布
+
+1，打包dist
+
+2，更新版本号
+
+3，示例代码中 cdn 包 和 readme.md中的示例  更新为新版本的地址
+
+3，git 合并请求 打tag ，tag为新的版本号
+
+4，更新 cdn 缓存
+
+5，测试示例代码中的 cdn 链接是否可以访问
+
+6，推送 npm 包
diff --git a/README.md b/README.md
@@ -56,14 +56,14 @@ You can also load via a `<script src="lib/bodyScrollLock.js"></script>` tag (ref
 
 ```javascript
 // 1. Import the functions
-const bodyScrollLock = require("body-scroll-lock-upgrade");
+const bodyScrollLock = require('body-scroll-lock-upgrade');
 const disableBodyScroll = bodyScrollLock.disableBodyScroll;
 const enableBodyScroll = bodyScrollLock.enableBodyScroll;
 
 // 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.
-const targetElement = document.querySelector("#someElementId");
+const targetElement = document.querySelector('#someElementId');
 
 // 3. ...in some event handler after showing the target element...disable body scroll
 disableBodyScroll(targetElement);
@@ -80,7 +80,7 @@ import {
   disableBodyScroll,
   enableBodyScroll,
   clearAllBodyScrollLocks,
-} from "body-scroll-lock-upgrade";
+} from 'body-scroll-lock-upgrade';
 
 class SomeComponent extends React.Component {
   targetElement = null;
@@ -89,7 +89,7 @@ class SomeComponent extends React.Component {
     // 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.
-    this.targetElement = document.querySelector("#targetElementId");
+    this.targetElement = document.querySelector('#targetElementId');
   }
 
   showTargetElement = () => {
@@ -128,7 +128,7 @@ import {
   disableBodyScroll,
   enableBodyScroll,
   clearAllBodyScrollLocks,
-} from "body-scroll-lock-upgrade";
+} from 'body-scroll-lock-upgrade';
 
 class SomeComponent extends React.Component {
   // 2. Initialise your ref and targetElement here
@@ -190,25 +190,25 @@ class SomeOtherComponent extends React.Component {
 ##### Angular
 
 ```javascript
-import { Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 
 // 1. Import the functions
 import {
   disableBodyScroll,
   enableBodyScroll,
   clearAllBodyScrollLocks,
-} from "body-scroll-lock-upgrade";
+} from 'body-scroll-lock-upgrade';
 
 @Component({
-  selector: "app-scroll-block",
-  templateUrl: "./scroll-block.component.html",
-  styleUrls: ["./scroll-block.component.css"],
+  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;
+  @ViewChild('scrollTarget') scrollTarget: ElementRef;
 
   showTargetElement() {
     // ... some logic to show target element
@@ -246,7 +246,7 @@ Then in the javascript:
     clearAllBodyScrollLocks,
     disableBodyScroll,
     enableBodyScroll,
-  } from "https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.4/lib/index.esm.js";
+  } from "https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.1.0/lib/index.esm.js";
 
   // 1. 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).
@@ -266,7 +266,7 @@ Then in the javascript:
 </script>
 
 // UMD
-<script src="https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.4/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.1.0/lib/index.umd.js"></script>
 <script>
   const open = () => {
     document.querySelector(".dialog").style.display = "block";
@@ -312,8 +312,8 @@ this gap is filled by a `padding-right` on the body element. If `disableBodyScro
 or `clearAllBodyScrollLocks` is called, the `padding-right` is automatically reset to the previous value.
 
 ```js
-import { disableBodyScroll } from "body-scroll-lock-upgrade";
-import type { BodyScrollOptions } from "body-scroll-lock-upgrade";
+import { disableBodyScroll } from 'body-scroll-lock-upgrade';
+import type { BodyScrollOptions } from 'body-scroll-lock-upgrade';
 
 const options: BodyScrollOptions = {
   reserveScrollBarGap: true,
@@ -336,7 +336,7 @@ See below for 2 use cases:
 
 ```javascript
 disableBodyScroll(container, {
-  allowTouchMove: (el) => el.tagName === "TEXTAREA",
+  allowTouchMove: (el) => el.tagName === 'TEXTAREA',
 });
 ```
 
@@ -348,7 +348,7 @@ Javascript:
 disableBodyScroll(container, {
   allowTouchMove: (el) => {
     while (el && el !== document.body) {
-      if (el.getAttribute("body-scroll-lock-ignore") !== null) {
+      if (el.getAttribute('body-scroll-lock-ignore') !== null) {
         return true;
       }
 

diff --git a/examples/next/hooks/body-scroll-lock.ts b/examples/next/hooks/body-scroll-lock.ts
@@ -19,23 +19,23 @@ interface Lock {
 
 // Older browsers don't support event options, feature detect it.
 let hasPassiveEvents = false;
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
   const passiveTestOptions: any = {
     get passive() {
       hasPassiveEvents = true;
       return undefined;
     },
   };
-  (window as any).addEventListener("testPassive", null, passiveTestOptions);
-  (window as any).removeEventListener("testPassive", null, passiveTestOptions);
+  (window as any).addEventListener('testPassive', null, passiveTestOptions);
+  (window as any).removeEventListener('testPassive', null, passiveTestOptions);
 }
 
 const isIosDevice =
-  typeof window !== "undefined" &&
+  typeof window !== 'undefined' &&
   window.navigator &&
   window.navigator.platform &&
   (/iP(ad|hone|od)/.test(window.navigator.platform) ||
-    (window.navigator.platform === "MacIntel" &&
+    (window.navigator.platform === 'MacIntel' &&
       window.navigator.maxTouchPoints > 1));
 type HandleScrollEvent = TouchEvent;
 
@@ -89,13 +89,14 @@ const setOverflowHidden = (options?: BodyScrollOptions) => {
     const reserveScrollBarGap =
       !!options && options.reserveScrollBarGap === true;
     const scrollBarGap =
-      window.innerWidth - document.documentElement.clientWidth;
+      window.innerWidth -
+      document.documentElement.getBoundingClientRect().width;
 
     if (reserveScrollBarGap && scrollBarGap > 0) {
       const computedBodyPaddingRight = parseInt(
         window
           .getComputedStyle(document.body)
-          .getPropertyValue("padding-right"),
+          .getPropertyValue('padding-right'),
         10
       );
       previousBodyPaddingRight = document.body.style.paddingRight;
@@ -108,7 +109,7 @@ const setOverflowHidden = (options?: BodyScrollOptions) => {
   // If previousBodyOverflowSetting is already set, don't set it again.
   if (previousBodyOverflowSetting === undefined) {
     previousBodyOverflowSetting = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    document.body.style.overflow = 'hidden';
   }
 };
 
@@ -142,15 +143,15 @@ const setPositionFixed = () =>
       // Update the dom inside an animation frame
       const { scrollY, scrollX, innerHeight } = window;
 
-      $html.style.height = "100%";
-      $html.style.overflow = "hidden";
+      $html.style.height = '100%';
+      $html.style.overflow = 'hidden';
 
-      $body.style.position = "fixed";
+      $body.style.position = 'fixed';
       $body.style.top = `${-scrollY}px`;
       $body.style.left = `${-scrollX}px`;
-      $body.style.width = "100%";
-      $body.style.height = "auto";
-      $body.style.overflow = "hidden";
+      $body.style.width = '100%';
+      $body.style.height = 'auto';
+      $body.style.overflow = 'hidden';
 
       setTimeout(
         () =>
@@ -159,7 +160,7 @@ const setPositionFixed = () =>
             const bottomBarHeight = innerHeight - window.innerHeight;
             if (bottomBarHeight && scrollY >= innerHeight) {
               // Move the content further up so that the bottom bar doesn't hide it
-              $body.style.top = -(scrollY + bottomBarHeight) + "px";
+              $body.style.top = -(scrollY + bottomBarHeight) + 'px';
             }
           }),
         300
@@ -177,15 +178,15 @@ const restorePositionSetting = () => {
     const $html = document.documentElement;
     const $body = document.body;
 
-    $html.style.height = htmlStyle?.height || "";
-    $html.style.overflow = htmlStyle?.overflow || "";
+    $html.style.height = htmlStyle?.height || '';
+    $html.style.overflow = htmlStyle?.overflow || '';
 
-    $body.style.position = bodyStyle.position || "";
-    $body.style.top = bodyStyle.top || "";
-    $body.style.left = bodyStyle.left || "";
-    $body.style.width = bodyStyle.width || "";
-    $body.style.height = bodyStyle.height || "";
-    $body.style.overflow = bodyStyle.overflow || "";
+    $body.style.position = bodyStyle.position || '';
+    $body.style.top = bodyStyle.top || '';
+    $body.style.left = bodyStyle.left || '';
+    $body.style.width = bodyStyle.width || '';
+    $body.style.height = bodyStyle.height || '';
+    $body.style.overflow = bodyStyle.overflow || '';
 
     // Restore scroll
     window.scrollTo(x, y);
@@ -239,7 +240,7 @@ export const disableBodyScroll = (
   if (!targetElement) {
     // eslint-disable-next-line no-console
     console.error(
-      "disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices."
+      'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'
     );
     return;
   }
@@ -283,7 +284,7 @@ export const disableBodyScroll = (
 
     if (!documentListenerAdded) {
       document.addEventListener(
-        "touchmove",
+        'touchmove',
         preventDefault,
         hasPassiveEvents ? { passive: false } : undefined
       );
@@ -302,7 +303,7 @@ export const clearAllBodyScrollLocks = (): void => {
 
     if (documentListenerAdded) {
       (document as any).removeEventListener(
-        "touchmove",
+        'touchmove',
         preventDefault,
         hasPassiveEvents ? { passive: false } : undefined
       );
@@ -331,7 +332,7 @@ export const enableBodyScroll = (targetElement: HTMLElement): void => {
   if (!targetElement) {
     // eslint-disable-next-line no-console
     console.error(
-      "enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices."
+      'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'
     );
     return;
   }
@@ -353,7 +354,7 @@ export const enableBodyScroll = (targetElement: HTMLElement): void => {
 
     if (documentListenerAdded && locks.length === 0) {
       (document as any).removeEventListener(
-        "touchmove",
+        'touchmove',
         preventDefault,
         hasPassiveEvents ? { passive: false } : undefined
       );

diff --git a/examples/vanilla-js/index-umd.html b/examples/vanilla-js/index-umd.html
@@ -309,22 +309,22 @@
     </p>
 
     <!-- <script src="../../lib/index.umd.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.4/lib/index.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.1.0/lib/index.umd.js"></script>
     <script>
       const open = () => {
-        document.querySelector(".dialog").style.display = "block";
-        document.querySelector(".mask").style.display = "block";
-        const targetElement = document.querySelector(".dialog");
+        document.querySelector('.dialog').style.display = 'block';
+        document.querySelector('.mask').style.display = 'block';
+        const targetElement = document.querySelector('.dialog');
         bodyScrollLockUpgrade.disableBodyScroll(targetElement);
       };
       const close = () => {
-        document.querySelector(".dialog").style.display = "none";
-        document.querySelector(".mask").style.display = "none";
-        const targetElement = document.querySelector(".dialog");
+        document.querySelector('.dialog').style.display = 'none';
+        document.querySelector('.mask').style.display = 'none';
+        const targetElement = document.querySelector('.dialog');
         bodyScrollLockUpgrade.enableBodyScroll(targetElement);
       };
-      document.getElementById("open").addEventListener("click", open);
-      document.getElementById("close").addEventListener("click", close);
+      document.getElementById('open').addEventListener('click', open);
+      document.getElementById('close').addEventListener('click', close);
     </script>
   </body>
 </html>
diff --git a/examples/vanilla-js/index.html b/examples/vanilla-js/index.html
@@ -318,21 +318,21 @@
         clearAllBodyScrollLocks,
         disableBodyScroll,
         enableBodyScroll,
-      } from "https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.0.4/lib/index.esm.js";
+      } from 'https://cdn.jsdelivr.net/gh/rick-liruixin/body-scroll-lock-upgrade@v1.1.0/lib/index.esm.js';
       const open = () => {
-        document.querySelector(".dialog").style.display = "block";
-        document.querySelector(".mask").style.display = "block";
-        const targetElement = document.querySelector(".dialog");
+        document.querySelector('.dialog').style.display = 'block';
+        document.querySelector('.mask').style.display = 'block';
+        const targetElement = document.querySelector('.dialog');
         disableBodyScroll(targetElement);
       };
       const close = () => {
-        document.querySelector(".dialog").style.display = "none";
-        document.querySelector(".mask").style.display = "none";
-        const targetElement = document.querySelector(".dialog");
+        document.querySelector('.dialog').style.display = 'none';
+        document.querySelector('.mask').style.display = 'none';
+        const targetElement = document.querySelector('.dialog');
         enableBodyScroll(targetElement);
       };
-      document.getElementById("open").addEventListener("click", open);
-      document.getElementById("close").addEventListener("click", close);
+      document.getElementById('open').addEventListener('click', open);
+      document.getElementById('close').addEventListener('click', close);
     </script>
   </body>
 </html>
diff --git a/lib/index.esm.js b/lib/index.esm.js