From 913e22c7278899ed39a06d06b343ab01d03b6824 Mon Sep 17 00:00:00 2001 From: vj-abishek Date: Sun, 21 Feb 2021 06:36:53 +0000 Subject: [PATCH 1/2] fix: scrollTop issue on mobile in inverse mode --- src/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 43096c7..436dcfd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -236,6 +236,9 @@ export default class InfiniteScroll extends Component { }; isElementAtTop(target: HTMLElement, scrollThreshold: string | number = 0.8) { + const isMobile = + navigator.maxTouchPoints || 'ontouchstart' in document.documentElement; + const clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight @@ -243,13 +246,17 @@ export default class InfiniteScroll extends Component { const threshold = parseThreshold(scrollThreshold); + if (isMobile && threshold.unit === ThresholdUnits.Pixel) + return target.scrollTop <= 200 + threshold.value; + + if (isMobile) return target.scrollTop <= 150; + if (threshold.unit === ThresholdUnits.Pixel) { return ( target.scrollTop <= threshold.value + clientHeight - target.scrollHeight + 1 ); } - return ( target.scrollTop <= threshold.value / 100 + clientHeight - target.scrollHeight + 1 From 36438f18347945811430ab2fb9fdbfed9a78ccca Mon Sep 17 00:00:00 2001 From: vj-abishek Date: Tue, 20 Apr 2021 07:00:36 +0000 Subject: [PATCH 2/2] refactor: fix the scroll top issue --- src/index.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 436dcfd..00e34f7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -236,9 +236,17 @@ export default class InfiniteScroll extends Component { }; isElementAtTop(target: HTMLElement, scrollThreshold: string | number = 0.8) { + const getChromeVersion = () => { + const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); + + return raw ? parseInt(raw[2], 10) : false; + }; + const isMobile = navigator.maxTouchPoints || 'ontouchstart' in document.documentElement; + const isOldMobileBrowser = isMobile && getChromeVersion() <= 80; + const clientHeight = target === document.body || target === document.documentElement ? window.screen.availHeight @@ -246,10 +254,10 @@ export default class InfiniteScroll extends Component { const threshold = parseThreshold(scrollThreshold); - if (isMobile && threshold.unit === ThresholdUnits.Pixel) + if (isOldMobileBrowser && threshold.unit === ThresholdUnits.Pixel) return target.scrollTop <= 200 + threshold.value; - if (isMobile) return target.scrollTop <= 150; + if (isOldMobileBrowser) return target.scrollTop <= 150; if (threshold.unit === ThresholdUnits.Pixel) { return (