diff --git a/src/components/Manga/actions/operate.ts b/src/components/Manga/actions/operate.ts index 88a5cdf6..496d5b50 100644 --- 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 index a32cd3ca..aa3fda07 100644 --- 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 index 35c8f369..54d91d62 100644 --- 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(