Add safezone to scroll end detection to prevent edge cases when scrolling to the end would not detect end (#201)

This commit is contained in:
Valter Martinek
2022-11-26 13:50:53 +01:00
committed by GitHub
parent 12cfc81aa8
commit bfca70a44c
2 changed files with 14 additions and 2 deletions

View File

@@ -20,7 +20,13 @@ const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
return -1; 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; const isAtStart = () => window.scrollX <= 0;
export default function HorizontalPager(props: IReaderProps) { export default function HorizontalPager(props: IReaderProps) {

View File

@@ -21,10 +21,16 @@ const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
}; };
// TODO: make configurable? // TODO: make configurable?
const SCROLL_SAFE_ZONE = 5; // px
const SCROLL_OFFSET = 0.95; const SCROLL_OFFSET = 0.95;
const SCROLL_BEHAVIOR: ScrollBehavior = 'smooth'; 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; const isAtTop = () => window.scrollY <= 0;
export default function VerticalPager(props: IReaderProps) { export default function VerticalPager(props: IReaderProps) {