Use "BasePager" for infinite scroll chapter change detection

There can be cases where when scrolling backward/forward the first/last page never gets visible in the viewport due to a large width/height of another page.
In that case the intersection observer would never trigger and thus, the chapter wouldn't get changed.

By using the Pager, which always takes up the full width/height, this problem will not be possible, since the start/end of the Pager always enters or leaves the viewport.

src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts

@@ -195,7 +195,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
 
         // gets immediately observed once on initial render
         let isInitialObserve = true;
-        let wasNextChapterOpened = false;
         const intersectionObserver = new IntersectionObserver(
             (entries) => {
                 if (isInitialObserve) {
@@ -203,10 +202,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
                     return;
                 }
 
-                if (wasNextChapterOpened) {
-                    return;
-                }
-
                 const entry = entries[entries.length - 1];
 
                 const elementIntersectionInfo = getElementIntersectionInfo(
@@ -233,16 +228,17 @@ export const useReaderInfiniteScrollUpdateChapter = (
                 const openChapterToOpen = initialOpenPreviousChapter || openNextChapter;
                 if (openChapterToOpen) {
                     openChapter(chapterToOpenId, !isChapterToOpenVisible, false);
-                    wasNextChapterOpened = true;
                     return;
                 }
 
                 if (openPreviousChapter) {
                     openChapter(chapterId, false, false);
-                    wasNextChapterOpened = true;
                 }
             },
-            { threshold: [OPEN_CHAPTER_INTERSECTION_RATIO], rootMargin: '-10px 0px 0px 0px' },
+            {
+                threshold: [OPEN_CHAPTER_INTERSECTION_RATIO],
+                rootMargin: pageType === 'first' ? '0px 0px -10px 0px' : '-10px 0px 0px 0px',
+            },
         );
         intersectionObserver.observe(image);