diff --git a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx index e87163e1..c415e211 100644 --- a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx @@ -416,6 +416,8 @@ const BaseReaderChapterViewer = ({ isPreviousChapterVisible={isPreviousChapterVisible} isNextChapterVisible={isNextChapterVisible} imageWrapper={pagerRef.current} + scrollbarXSize={scrollbarXSize} + scrollbarYSize={scrollbarYSize} /> )} {showPreviousTransitionPage && ( diff --git a/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx b/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx index c80c1d8f..567a35d3 100644 --- a/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx +++ b/src/modules/reader/components/viewer/ReaderInfiniteScrollUpdateChapter.tsx @@ -9,7 +9,7 @@ import { memo } from 'react'; import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; import { useReaderInfiniteScrollUpdateChapter } from '@/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts'; -import { ReadingDirection, ReadingMode } from '@/modules/reader/types/Reader.types.ts'; +import { ReadingDirection, ReadingMode, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts'; import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts'; import { ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts'; @@ -24,7 +24,9 @@ const BaseReaderInfiniteScrollUpdateChapter = ({ isNextChapterVisible, imageWrapper, openChapter, -}: { + scrollbarXSize, + scrollbarYSize, +}: Pick & { readingMode: ReadingMode; readingDirection: ReadingDirection; chapterId: ChapterIdInfo['id']; @@ -46,6 +48,8 @@ const BaseReaderInfiniteScrollUpdateChapter = ({ readingDirection, openChapter, imageWrapper, + scrollbarXSize, + scrollbarYSize, ); useReaderInfiniteScrollUpdateChapter( 'last', @@ -57,6 +61,8 @@ const BaseReaderInfiniteScrollUpdateChapter = ({ readingDirection, openChapter, imageWrapper, + scrollbarXSize, + scrollbarYSize, ); return null; diff --git a/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts b/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts index c977338b..3dcf72f0 100644 --- a/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts +++ b/src/modules/reader/hooks/useReaderInfiniteScrollUpdateChapter.ts @@ -36,18 +36,23 @@ const OPEN_CHAPTER_INTERSECTION_RATIO = 0; const getElementIntersectionInfo = ( readingDirection: ReadingDirection, { top, right, bottom, left }: DOMRect, + scrollbarXSize: number, + scrollbarYSize: number, ): ElementIntersectionInfo => { const themeDirectionOfReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection]; - const startOfViewportHorizontal = getOptionForDirection(0, window.innerWidth, themeDirectionOfReadingDirection); - const endOfViewportHorizontal = getOptionForDirection(window.innerWidth, 0, themeDirectionOfReadingDirection); + const viewportWidth = window.innerWidth - scrollbarYSize; + const viewportHeight = window.innerHeight - scrollbarXSize; + + const startOfViewportHorizontal = getOptionForDirection(0, viewportWidth, themeDirectionOfReadingDirection); + const endOfViewportHorizontal = getOptionForDirection(viewportWidth, 0, themeDirectionOfReadingDirection); const startOfElementHorizontal = getOptionForDirection(left, right, themeDirectionOfReadingDirection); const endOfElementHorizontal = getOptionForDirection(right, left, themeDirectionOfReadingDirection); return { [ReadingMode.CONTINUOUS_VERTICAL]: { - start: bottom >= window.innerHeight, + start: bottom >= viewportHeight, end: top < 0, }, [ReadingMode.CONTINUOUS_HORIZONTAL]: { @@ -188,6 +193,8 @@ export const useReaderInfiniteScrollUpdateChapter = ( readingDirection: ReadingDirection, openChapter: ReturnType, image: HTMLElement | null, + scrollbarXSize: number, + scrollbarYSize: number, ) => { useIntersectionObserver( image, @@ -202,6 +209,8 @@ export const useReaderInfiniteScrollUpdateChapter = ( const elementIntersectionInfo = getElementIntersectionInfo( readingDirection, entry.target.getBoundingClientRect(), + scrollbarXSize, + scrollbarYSize, ); const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection( elementIntersectionInfo, @@ -239,6 +248,8 @@ export const useReaderInfiniteScrollUpdateChapter = ( readingMode, readingDirection, openChapter, + scrollbarXSize, + scrollbarYSize, ], ), useMemo(