fix(Popup): lockScroll not work #7738

package.json

@@ -60,7 +60,7 @@
     "@vant/icons": "^1.5.0",
     "@vant/lazyload": "^1.0.2",
     "@vant/popperjs": "^1.0.2",
-    "@vant/use": "^1.0.0"
+    "@vant/use": "^1.0.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vant-use/changelog.md

@@ -1,5 +1,11 @@
 # 更新日志
 
+### v1.0.1
+
+`2020-12-27`
+
+- 导出个别内部方法供 Vant 使用
+
 ### v1.0.0
 
 `2020-12-15`

packages/vant-use/src/useScrollParent/index.ts

@@ -28,12 +28,15 @@ export function getScrollParent(el: Element, root: ScrollElement = window) {
   return root;
 }
 
-export function useScrollParent(el: Ref<Element | undefined>) {
+export function useScrollParent(
+  el: Ref<Element | undefined>,
+  root: ScrollElement = window
+) {
   const scrollParent = ref<Element | Window>();
 
   onMounted(() => {
     if (el.value) {
-      scrollParent.value = getScrollParent(el.value);
+      scrollParent.value = getScrollParent(el.value, root);
     }
   });
 

src/composables/use-lock-scroll.ts

@@ -1,22 +1,70 @@
-let count = 0;
+import { Ref } from 'vue';
+import { getScrollParent, supportsPassive } from '@vant/use';
+import { useTouch } from './use-touch';
+import { preventDefault } from '../utils';
 
-const CLASSNAME = 'van-overflow-hidden';
+let totalLockCount = 0;
+
+const BODY_LOCK_CLASS = 'van-overflow-hidden';
+
+export function useLockScroll(
+  rootRef: Ref<HTMLElement | undefined>,
+  shouldLock: () => boolean
+) {
+  const touch = useTouch();
+
+  const onTouchMove = (event: TouchEvent) => {
+    touch.move(event);
+
+    const direction = touch.deltaY.value > 0 ? '10' : '01';
+    const el = getScrollParent(
+      event.target as Element,
+      rootRef.value
+    ) as HTMLElement;
+    const { scrollHeight, offsetHeight, scrollTop } = el;
+    let status = '11';
+
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? '00' : '01';
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = '10';
+    }
+
+    if (
+      status !== '11' &&
+      touch.isVertical() &&
+      !(parseInt(status, 2) & parseInt(direction, 2))
+    ) {
+      preventDefault(event, true);
+    }
+  };
 
-export function useLockScroll(shouldLock: () => boolean) {
   const lock = () => {
     if (shouldLock()) {
-      if (!count) {
-        document.body.classList.add(CLASSNAME);
+      document.addEventListener('touchstart', touch.start);
+      document.addEventListener(
+        'touchmove',
+        onTouchMove,
+        supportsPassive ? { passive: false } : false
+      );
+
+      if (!totalLockCount) {
+        document.body.classList.add(BODY_LOCK_CLASS);
       }
-      count++;
+
+      totalLockCount++;
     }
   };
 
   const unlock = () => {
-    if (shouldLock() && count) {
-      count--;
-      if (!count) {
-        document.body.classList.remove(CLASSNAME);
+    if (shouldLock() && totalLockCount) {
+      document.removeEventListener('touchstart', touch.start);
+      document.removeEventListener('touchmove', onTouchMove);
+
+      totalLockCount--;
+
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
       }
     }
   };

src/popup/index.js

@@ -112,7 +112,10 @@ export default createComponent({
     const zIndex = ref();
     const popupRef = ref();
 
-    const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
+    const [lockScroll, unlockScroll] = useLockScroll(
+      popupRef,
+      () => props.lockScroll
+    );
 
     const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
 

yarn.lock

@@ -1996,10 +1996,10 @@
   resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.2.0.tgz#486300b23e57db9ce9231a04e0a0c621c68692d8"
   integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ==
 
-"@vant/use@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npm.taobao.org/@vant/use/download/@vant/use-1.0.0.tgz?cache=0&sync_timestamp=1608030568231&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.0.0.tgz#68db22af1130ccf867814fec5ec8c4f7ad94f36d"
-  integrity sha1-aNsirxEwzPhngU/sXsjE962U820=
+"@vant/use@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/@vant/use/download/@vant/use-1.0.1.tgz#8b9a037e3340052b5ca829f260bd25c35977a608"
+  integrity sha1-i5oDfjNABStcqCnyYL0lw1l3pgg=
   dependencies:
     "@babel/runtime" "7.x"