diff --git a/resources/assets/js/functions/utils.js b/resources/assets/js/functions/utils.js index 79d42e3b4..3cfb6e818 100755 --- a/resources/assets/js/functions/utils.js +++ b/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); + }, } diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue index fd04e1311..7d22c66a6 100755 --- a/resources/assets/js/pages/manage/components/ChatInput/index.vue +++ b/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 = []; diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index ac189982c..f9e9381d7 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/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">
@@ -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();