eb8cb3854c
This moves all scrolling from child divs to the main window. This improves our keyboard handling, as focus will be given to the body element, not the child div when navigating by keyboard commands, so arrow keys and space bar will work after navigating to the reader with the keyboard commands.
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
export const useFetchMore = (callback: () => void, delay = 500): void => {
|
|
const [first, setFirst] = useState(true)
|
|
const throttleTimeout = useRef<NodeJS.Timeout | undefined>(undefined)
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return
|
|
}
|
|
|
|
const callbackInternal = (): void => {
|
|
const {
|
|
scrollTop,
|
|
scrollHeight,
|
|
clientHeight
|
|
} = window.document.documentElement;
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight - (scrollHeight / 3)) {
|
|
callback()
|
|
}
|
|
throttleTimeout.current = undefined
|
|
}
|
|
|
|
const handleScroll = () => {
|
|
if (first) {
|
|
setFirst(false)
|
|
callbackInternal()
|
|
return
|
|
}
|
|
if (typeof throttleTimeout.current === 'undefined') {
|
|
throttleTimeout.current = setTimeout(callbackInternal, delay)
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
}
|
|
}, [callback, delay, first, setFirst])
|
|
}
|