Решил реализовать в своем проекте скролл поэкранно. И неожиданно нарвался на ряд сложностей. Оказывается, чтобы в реакте отключить поведение по умолчанию, нужно использовать целый ряд уловок с хуками. В моем случае чтобы добиться скролла поэкранно была написана следующая реализация:
// реф для отслеживания того, скролится ли элемент в данный момент
const active = useRef(true)
//реф для корректной установки прослущивателя событий
const myref = useRef<HTMLInputElement>(null);
useEffect(() => {
if (myref.current) {
myref.current.addEventListener('wheel', (e: WheelEvent) => {
e.preventDefault();
if (active.current) {
active.current = false
setTimeout(() => {
if (e.deltaY > 0) {
let windowHeigth = document.documentElement.clientHeight
window.scrollBy(0, windowHeigth)
}
if (e.deltaY < 0) {
let windowHeigth = document.documentElement.clientHeight
window.scrollBy(0, -windowHeigth)
}
}, 300)
setTimeout(() => {
active.current = true
}, 500)
}
}, { passive: false });
}
}, [])
return (
<div ref={myref}>... остальной код...
Можно ли упростить этот разгул порнографии в коде? Я что-то упустил, или возможно есть какие-то библиотеки?
