diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx index a93f24ca..2ce8f35f 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -55,6 +55,7 @@ function imageStyle(settings: IReaderSettings): any { minWidth: '50vw', width: dimensions.width < dimensions.height ? '100vw' : '100%', maxWidth: '100%', + pointerEvents: 'none', }; } diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx index ea040f19..7f03dd42 100644 --- a/src/components/reader/pager/VerticalPager.tsx +++ b/src/components/reader/pager/VerticalPager.tsx @@ -83,6 +83,33 @@ export function VerticalPager(props: IReaderProps) { }; }, [settings.loadNextOnEnding, nextChapter]); + const mouseYPos = useRef(0); + const didMouseMove = useRef(false); + + function dragScreen(e: MouseEvent) { + didMouseMove.current = true; + window.scrollBy(0, mouseYPos.current - e.pageY); + } + + function dragControl(e: MouseEvent) { + mouseYPos.current = e.pageY; + selfRef.current?.addEventListener('mousemove', dragScreen); + } + + function removeDragControl() { + selfRef.current?.removeEventListener('mousemove', dragScreen); + } + + useEffect(() => { + selfRef.current?.addEventListener('mousedown', dragControl); + selfRef.current?.addEventListener('mouseup', removeDragControl); + + return () => { + selfRef.current?.removeEventListener('mousedown', dragControl); + selfRef.current?.removeEventListener('mouseup', removeDragControl); + }; + }, [selfRef]); + const go = useCallback( (direction: 'up' | 'down') => { if (direction === 'down' && isAtBottom()) { @@ -107,13 +134,18 @@ export function VerticalPager(props: IReaderProps) { const handleKeyboard = (e: KeyboardEvent) => { switch (e.code) { case 'Space': + e.preventDefault(); + go(e.shiftKey ? 'up' : 'down'); + break; + case 'ArrowDown': case 'ArrowRight': e.preventDefault(); - go('down'); + go(e.shiftKey ? 'up' : 'down'); break; + case 'ArrowUp': case 'ArrowLeft': e.preventDefault(); - go('up'); + go(e.shiftKey ? 'down' : 'up'); break; default: break; @@ -144,7 +176,14 @@ export function VerticalPager(props: IReaderProps) { margin: '0 auto', width: '100%', }} - onClick={(e) => go(e.clientX > window.innerWidth / 2 ? 'down' : 'up')} + onClick={(e) => { + if (didMouseMove.current) { + didMouseMove.current = false; + return; + } + + go(e.clientX > window.innerWidth / 2 ? 'down' : 'up'); + }} > {pages.map((page) => (