diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 7edf4ebc..531603b8 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -54,6 +54,7 @@ import { useReaderHideCursorOnInactivity, useReaderHideOverlayOnUserScroll, useReaderHorizontalModeInvertXYScrolling, + useReaderScrollToStartOnPageChange, } from '@/modules/reader/utils/Reader.utils.ts'; import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts'; import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx'; @@ -223,6 +224,12 @@ const BaseReaderViewer = forwardRef( imageRefs, themeDirection, readingDirection, + ); + useReaderScrollToStartOnPageChange( + currentPageIndex, + isContinuousReadingModeActive, + themeDirection, + readingDirection, scrollElementRef, ); useReaderHideCursorOnInactivity(scrollElementRef); diff --git a/src/modules/reader/utils/Reader.utils.ts b/src/modules/reader/utils/Reader.utils.ts index 7ad7f012..7ec12721 100644 --- a/src/modules/reader/utils/Reader.utils.ts +++ b/src/modules/reader/utils/Reader.utils.ts @@ -229,7 +229,6 @@ export const useReaderHandlePageSelection = ( imageRefs: MutableRefObject<(HTMLElement | null)[]>, themeDirection: Direction, readingDirection: ReadingDirection, - scrollElementRef: MutableRefObject, ) => { useLayoutEffect(() => { if (pageToScrollToIndex == null) { @@ -249,13 +248,6 @@ export const useReaderHandlePageSelection = ( }); } - if (!isContinuousReadingModeActive) { - scrollElementRef.current?.scrollTo( - getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection), - 0, - ); - } - const newPageIndex = getNextIndexFromPage(pageToScrollTo); const isLastPage = newPageIndex === totalPages - 1; @@ -264,6 +256,23 @@ export const useReaderHandlePageSelection = ( }, [pageToScrollToIndex]); }; +export const useReaderScrollToStartOnPageChange = ( + currentPageIndex: ReaderStatePages['currentPageIndex'], + isContinuousReadingModeActive: boolean, + themeDirection: Direction, + readingDirection: ReadingDirection, + scrollElementRef: MutableRefObject, +): void => { + useLayoutEffect(() => { + if (!isContinuousReadingModeActive) { + scrollElementRef.current?.scrollTo( + getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection), + 0, + ); + } + }, [currentPageIndex]); +}; + export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject) => { const mouseInactiveTimeout = useRef();