From ae89a42ac4b62c64b65e6039ce046c58fcd7e49e Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 25 Dec 2024 02:59:53 +0100
Subject: [PATCH] Scroll to start of page on page change

Resets the scroll position for single/double page mode to the start of the opened page on a page change.
---
 .../reader/components/viewer/ReaderViewer.tsx      |  8 ++++++++
 src/modules/reader/utils/ReaderPager.utils.tsx     | 14 ++++++++++++++
 2 files changed, 22 insertions(+)

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);
+};