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

@@ -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 && (

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;

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

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