perf: 优化移动客户端滚动穿透

resources/assets/js/functions/utils.js

@@ -74,5 +74,38 @@ module.exports = {
             })
         }
         return list;
-    }
+    },
+
+    /**
+     * 阻止滑动穿透
+     * @param el
+     */
+    scrollPreventThrough(el) {
+        if (!el) {
+            return;
+        }
+        if (el.getAttribute("data-prevent-through") === "yes") {
+            return;
+        }
+        el.setAttribute("data-prevent-through", "yes")
+        //
+        let targetY = null;
+        el.addEventListener('touchstart', function (e) {
+            targetY = Math.floor(e.targetTouches[0].clientY);
+        });
+        el.addEventListener('touchmove', function (e) {
+            // 检测可滚动区域的滚动事件，如果滑到了顶部或底部，阻止默认事件
+            let NewTargetY = Math.floor(e.targetTouches[0].clientY),    //本次移动时鼠标的位置，用于计算
+                sTop = el.scrollTop,        //当前滚动的距离
+                sH = el.scrollHeight,       //可滚动区域的高度
+                lyBoxH = el.clientHeight;   //可视区域的高度
+            if (sTop <= 0 && NewTargetY - targetY > 0) {
+                // 下拉页面到顶
+                e.preventDefault();
+            } else if (sTop >= sH - lyBoxH && NewTargetY - targetY < 0) {
+                // 上翻页面到底
+                e.preventDefault();
+            }
+        }, false);
+    },
 }

resources/assets/js/pages/manage/components/ChatInput/index.vue

@@ -125,6 +125,7 @@ import touchmouse from "../../../../directives/touchmouse";
 import TransferDom from "../../../../directives/transfer-dom";
 import clickoutside from "../../../../directives/clickoutside";
 import {Store} from "le5le-store";
+import {scrollPreventThrough} from "../../../../functions/utils";
 
 export default {
     name: 'ChatInput',
@@ -490,6 +491,7 @@ export default {
                                 containers[i].classList.remove("user-mention");
                                 containers[i].classList.remove("task-mention");
                                 containers[i].classList.add(mentionName);
+                                scrollPreventThrough(containers[i]);
                             }
                             this.getSource(mentionChar).then(array => {
                                 let values = [];

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -6,8 +6,8 @@
         @drop.prevent="chatPasteDrag($event, 'drag')"
         @dragover.prevent="chatDragOver(true, $event)"
         @dragleave.prevent="chatDragOver(false, $event)"
-        @touchstart="onTouchstart"
-        @touchmove="onTouchmove">
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove">
         <!--顶部导航-->
         <div class="dialog-nav" :style="navStyle">
             <slot name="head">
@@ -649,14 +649,14 @@ export default {
             }
         },
 
-        onTouchstart(e) {
+        onTouchStart(e) {
             this.wrapperStart = Object.assign(this.scrollInfo(), {
                 clientY: e.touches[0].clientY,
                 exclud: !this.$refs.scroller.$el.contains(e.target),
             });
         },
 
-        onTouchmove(e) {
+        onTouchMove(e) {
             if (this.windowSmall && this.windowScrollY > 0) {
                 if (this.wrapperStart.exclud) {
                     e.preventDefault();