From e1895b21e3337fd40fed3d607c9da57d9cd16510 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 3 Apr 2025 22:30:35 +0200
Subject: [PATCH] Use "ReaderChapterViewer" as "root" for
 "IntersectionObserver" for "infinite scroll"

Using the actual "document element" as the "intersection observer root" causes issues in case the available reader width is less than the viewport.
In these cases sometimes the previous/next chapter never loaded because the necessary intersection never fired.
---
 src/modules/reader/components/viewer/ReaderChapterViewer.tsx  | 3 +++
 .../components/viewer/ReaderInfiniteScrollUpdateChapter.tsx   | 4 ++++
 src/modules/reader/components/viewer/ReaderViewer.tsx         | 1 +
 .../reader/hooks/useReaderInfiniteScrollUpdateChapter.ts      | 2 ++
 4 files changed, 10 insertions(+)

diff --git a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx
index 9c8bbdf5..052ad8bf 100644
--- a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx
+++ b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx
@@ -91,6 +91,7 @@ const BaseReaderChapterViewer = ({
     onSizeChange,
     minWidth,
     minHeight,
+    scrollElement,
 }: Pick<
     ReaderStatePages,
     | 'currentPageIndex'
@@ -128,6 +129,7 @@ const BaseReaderChapterViewer = ({
         onSizeChange: (width: number, height: number, chapterId: ChapterIdInfo['id']) => void;
         minWidth: number;
         minHeight: number;
+        scrollElement: HTMLElement | null;
     }) => {
     const { t } = useTranslation();
     const { direction: themeDirection } = useTheme();
@@ -419,6 +421,7 @@ const BaseReaderChapterViewer = ({
                     imageWrapper={pagerRef.current}
                     scrollbarXSize={scrollbarXSize}
                     scrollbarYSize={scrollbarYSize}
+                    scrollElement={scrollElement}
                 />
             )}
             {showPreviousTransitionPage && (
diff --git a/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx b/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx
index 567a35d3..f738b828 100644
--- a/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx
+++ b/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx
@@ -26,6 +26,7 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
     openChapter,
     scrollbarXSize,
     scrollbarYSize,
+    scrollElement,
 }: Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & {
     readingMode: ReadingMode;
     readingDirection: ReadingDirection;
@@ -37,6 +38,7 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
     isNextChapterVisible: boolean;
     imageWrapper: HTMLElement | null;
     openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
+    scrollElement: HTMLElement | null;
 }) => {
     useReaderInfiniteScrollUpdateChapter(
         'first',
@@ -50,6 +52,7 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
         imageWrapper,
         scrollbarXSize,
         scrollbarYSize,
+        scrollElement,
     );
     useReaderInfiniteScrollUpdateChapter(
         'last',
@@ -63,6 +66,7 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
         imageWrapper,
         scrollbarXSize,
         scrollbarYSize,
+        scrollElement,
     );
 
     return null;
diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx
index 83d7d475..86a6ce99 100644
--- a/src/modules/reader/components/viewer/ReaderViewer.tsx
+++ b/src/modules/reader/components/viewer/ReaderViewer.tsx
@@ -434,6 +434,7 @@ const BaseReaderViewer = forwardRef(
                             onSizeChange={onChapterViewSizeChange}
                             minWidth={isChapterSizeSourceChapter ? 0 : minChapterViewWidth}
                             minHeight={isChapterSizeSourceChapter ? 0 : minChapterViewHeight}
+                            scrollElement={scrollElementRef.current}
                         />
                     );
                 })}
diff --git a/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts b/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts
index 1bcbe038..bca9588e 100644
--- a/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts
+++ b/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts
@@ -244,6 +244,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
     image: HTMLElement | null,
     scrollbarXSize: number,
     scrollbarYSize: number,
+    scrollElement: HTMLElement | null,
 ) => {
     useIntersectionObserver(
         image,
@@ -303,6 +304,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
         ),
         useMemo(
             () => ({
+                root: scrollElement,
                 threshold: [OPEN_CHAPTER_INTERSECTION_RATIO],
                 rootMargin: getRootMargin(pageType, readingMode, readingDirection),
                 // gets immediately observed once on initial render