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:
@@ -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) {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user