fix: 🐛 修复使用触摸板在卷轴模式下滚动后会再异常滚动一截的 bug

#142
hymbz · Jan 30, 2024 · d5ff635 · d5ff635
1 parent 5ed7d53
commit d5ff635
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/src/components/Manga/actions/operate.ts b/src/components/Manga/actions/operate.ts
@@ -163,6 +163,7 @@ let timeoutId = 0;
 let lastPageNum = -1;
 let wheelType: undefined | 'trackpad' | 'mouse';
 let equalNum = 0;
+let diffNum = 0;
 
 export const handleWheel = (e: WheelEvent) => {
   e.stopPropagation();
@@ -205,11 +206,16 @@ export const handleWheel = (e: WheelEvent) => {
 
   // 为了避免因临时卡顿而误判为触摸板
   // 在连续几次滚动量均相同的情况下，将 wheelType 相关变量重置回初始状态
-  if (lastDeltaY === nowDeltaY && nowDeltaY > 5) equalNum += 1;
-  else equalNum = 0;
-  if (equalNum >= 3) {
-    wheelType = undefined;
-    lastPageNum = -1;
+  if (diffNum < 10) {
+    if (lastDeltaY === nowDeltaY && nowDeltaY > 5) equalNum += 1;
+    else {
+      diffNum += 1;
+      equalNum = 0;
+    }
+    if (equalNum >= 3) {
+      wheelType = undefined;
+      lastPageNum = -1;
+    }
   }
 
   lastDeltaY = nowDeltaY;

diff --git a/src/components/Manga/actions/pointer.ts b/src/components/Manga/actions/pointer.ts
@@ -5,7 +5,13 @@ import type { UseDrag } from '../hooks/useDrag';
 import { store, setState, refs } from '../store';
 import { resetUI, scrollTo } from './helper';
 import { resetPage } from './show';
-import { turnPageFn, turnPageAnimation } from './turnPage';
+import {
+  turnPageFn,
+  turnPageAnimation,
+  turnPage,
+  isBottom,
+  isTop,
+} from './turnPage';
 import { zoom } from './zoom';
 import { imgTopList, rootSize } from './memo';
 
@@ -171,11 +177,31 @@ export const handleMangaFlowDrag: UseDrag = ({
 let lastDeltaY = 0;
 let retardStartTime = 0;
 
+let lastWheel = 0;
+
 export const handleTrackpadWheel = (e: WheelEvent) => {
   let deltaY = Math.floor(-e.deltaY);
   let absDeltaY = Math.abs(deltaY);
   if (absDeltaY < 2) return;
 
+  let time = 0;
+  let now = 0;
+  // 为了避免被触摸板的滚动惯性触发，限定一下滚动距离
+  if (absDeltaY > 50) {
+    now = performance.now();
+    time = now - lastWheel;
+    lastWheel = now;
+  }
+
+  if (store.option.scrollMode) {
+    if (
+      time > 200 &&
+      ((isTop(store) && e.deltaY < 0) || (isBottom(store) && e.deltaY > 0))
+    )
+      turnPage(e.deltaY > 0 ? 'next' : 'prev');
+    return;
+  }
+
   // 加速度小于指定值后逐渐缩小滚动距离，实现减速效果
   if (Math.abs(absDeltaY - lastDeltaY) <= 6) {
     if (!retardStartTime) retardStartTime = Date.now();
@@ -189,14 +215,9 @@ export const handleTrackpadWheel = (e: WheelEvent) => {
 
   setState((state) => {
     // 滚动至漫画头尾尽头时
-    if (
-      (store.activePageIndex === 0 && dy > 0) ||
-      (store.activePageIndex === store.pageList.length - 1 && dy < 0)
-    ) {
+    if ((isTop(state) && dy > 0) || (isBottom(state) && dy < 0)) {
+      if (time > 200) turnPageFn(state, dy < 0 ? 'next' : 'prev');
       dy = 0;
-      // 为了避免被触摸板的滚动惯性触发上/下一话跳转，限定一下滚动距离
-      if (absDeltaY > 50)
-        turnPageFn(state, store.activePageIndex === 0 ? 'prev' : 'next');
     }
 
     // 滚动过一页时

diff --git a/src/components/Manga/actions/turnPage.ts b/src/components/Manga/actions/turnPage.ts
@@ -5,14 +5,14 @@ import { contentHeight, rootSize, scrollTop } from './memo';
 import { resetPage } from './show';
 
 /** 判断当前是否已经滚动到底部 */
-const isBottom = (state: State) => {
+export const isBottom = (state: State) => {
   return state.option.scrollMode
     ? Math.ceil(scrollTop() + rootSize().height) >= contentHeight()
     : state.activePageIndex === state.pageList.length - 1;
 };
 
 /** 判断当前是否已经滚动到顶部 */
-const isTop = (state: State) =>
+export const isTop = (state: State) =>
   state.option.scrollMode ? scrollTop() === 0 : state.activePageIndex === 0;
 
 export const closeScrollLock = debounce(