nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update useScroll to check distance in threshold instead of pixels

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-05 15:29:11 +08:00
parent 599d81f924
commit de45a0f9d5
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/pages/home.jsx
View file

@ -165,8 +165,8 @@ function Home({ hidden }) {
const { scrollDirection, reachTop, nearReachTop, nearReachBottom } = const { scrollDirection, reachTop, nearReachTop, nearReachBottom } =
useScroll({ useScroll({
scrollableElement: scrollableRef.current, scrollableElement: scrollableRef.current,
distanceFromTop: window.innerHeight / 2, distanceFromTop: 0.1,
distanceFromBottom: window.innerHeight, distanceFromBottom: 0.15,
}); });
useEffect(() => { useEffect(() => {
@ -247,8 +247,9 @@ function Home({ hidden }) {
</div> </div>
</header> </header>
{snapStates.homeNew.length > 0 && {snapStates.homeNew.length > 0 &&
((scrollDirection === 'up' && !nearReachTop && !nearReachBottom) || scrollDirection === 'up' &&
reachTop) && ( !nearReachTop &&
!nearReachBottom && (
<button <button
class="updates-button" class="updates-button"
type="button" type="button"

8
src/utils/useScroll.js
View file

@ -17,6 +17,10 @@ export default function useScroll({
function onScroll() { function onScroll() {
const { scrollTop, scrollHeight, clientHeight } = scrollableElement; const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
const scrollDistance = Math.abs(scrollTop - previousScrollTop); const scrollDistance = Math.abs(scrollTop - previousScrollTop);
const distanceFromTopPx =
scrollHeight * Math.min(1, Math.max(0, distanceFromTop));
const distanceFromBottomPx =
scrollHeight * Math.min(1, Math.max(0, distanceFromBottom));
if (scrollDistance >= scrollThreshold) { if (scrollDistance >= scrollThreshold) {
setScrollDirection(previousScrollTop < scrollTop ? 'down' : 'up'); setScrollDirection(previousScrollTop < scrollTop ? 'down' : 'up');
@ -24,9 +28,9 @@ export default function useScroll({
} }
setReachTop(scrollTop === 0); setReachTop(scrollTop === 0);
setNearReachTop(scrollTop <= distanceFromTop); setNearReachTop(scrollTop <= distanceFromTopPx);
setNearReachBottom( setNearReachBottom(
scrollTop + clientHeight >= scrollHeight - distanceFromBottom, scrollTop + clientHeight >= scrollHeight - distanceFromBottomPx,
); );
} }