diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 6b649464..6c703796 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -37,6 +37,7 @@ import { createPagesData, getDoublePageModePages, getScrollIntoViewInlineOption, + getScrollToXForReadingDirection, isSpreadPage, } from '@/modules/reader/utils/ReaderPager.utils.tsx'; import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; @@ -227,6 +228,13 @@ const BaseReaderViewer = forwardRef( }); } + if (!isContinuousReadingModeActive) { + scrollElementRef.current?.scrollTo( + getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection), + 0, + ); + } + const newPageIndex = getNextIndexFromPage(pageToScrollTo); const isLastPage = newPageIndex === totalPages - 1; diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx index a30ab4df..e7db009c 100644 --- a/src/modules/reader/utils/ReaderPager.utils.tsx +++ b/src/modules/reader/utils/ReaderPager.utils.tsx @@ -507,3 +507,17 @@ export const getScrollIntoViewInlineOption = ( return getOptionForDirection('end', 'start', themeDirectionForReadingDirection); }; + +export const getScrollToXForReadingDirection = ( + element: HTMLElement, + themeDirection: Direction, + readingDirection: ReadingDirection, +): number => { + const themeDirectionForReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection]; + + if (themeDirection === 'ltr') { + return getOptionForDirection(0, element.scrollWidth, themeDirectionForReadingDirection); + } + + return getOptionForDirection(-element.scrollWidth, 0, themeDirectionForReadingDirection); +};