From bfca70a44cb90812d5df286068d1e1f1775309ee Mon Sep 17 00:00:00 2001 From: Valter Martinek Date: Sat, 26 Nov 2022 13:50:53 +0100 Subject: [PATCH] Add safezone to scroll end detection to prevent edge cases when scrolling to the end would not detect end (#201) --- src/components/reader/pager/HorizontalPager.tsx | 8 +++++++- src/components/reader/pager/VerticalPager.tsx | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/reader/pager/HorizontalPager.tsx b/src/components/reader/pager/HorizontalPager.tsx index 13181e21..e6fe387b 100644 --- a/src/components/reader/pager/HorizontalPager.tsx +++ b/src/components/reader/pager/HorizontalPager.tsx @@ -20,7 +20,13 @@ const findCurrentPageIndex = (wrapper: HTMLDivElement): number => { return -1; }; -const isAtEnd = () => window.innerWidth + window.scrollX >= document.body.scrollWidth; +const SCROLL_SAFE_ZONE = 5; // px +const isAtEnd = () => { + const visibleEnd = window.innerWidth + window.scrollX; + // SCROLL_SAFE_ZONE is here for special cases when window might be .5px shorter + // and math just dont add up correctly + return visibleEnd >= document.body.scrollWidth - SCROLL_SAFE_ZONE; +}; const isAtStart = () => window.scrollX <= 0; export default function HorizontalPager(props: IReaderProps) { diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx index 5a7c942a..b4945c54 100644 --- a/src/components/reader/pager/VerticalPager.tsx +++ b/src/components/reader/pager/VerticalPager.tsx @@ -21,10 +21,16 @@ const findCurrentPageIndex = (wrapper: HTMLDivElement): number => { }; // TODO: make configurable? +const SCROLL_SAFE_ZONE = 5; // px const SCROLL_OFFSET = 0.95; const SCROLL_BEHAVIOR: ScrollBehavior = 'smooth'; -const isAtBottom = () => window.innerHeight + window.scrollY >= document.body.offsetHeight; +const isAtBottom = () => { + const visibleBottom = window.innerHeight + window.scrollY; + // SCROLL_SAFE_ZONE is here for special cases when window might be .5px shorter + // and math just dont add up correctly + return visibleBottom >= document.body.offsetHeight - SCROLL_SAFE_ZONE; +}; const isAtTop = () => window.scrollY <= 0; export default function VerticalPager(props: IReaderProps) {