Почему при скролле мышью скроллится только на последний и первый элементы?
Пытаюсь реализовать посекционный скролл колесиком мыши. Сейчас скроллится только к первой или последней секции на странице. Почему? Есть компонент:
export default function Home() {
const handleScroll = () => {
let yPositions = []
yPositions = Array.from(document.getElementsByClassName('section__scroll')).map((sectionItem, index) => {
let yPosition = sectionItem.getBoundingClientRect().top + document.documentElement.scrollTop
yPositions.push(yPosition)
return yPosition
})
let currentOffset = window.scrollY
let isScrollDown = true ? currentOffset > scroll.offset : false
setScroll(scroll.offset = currentOffset)
if (isScrollDown && scroll.currentSectionIndex !== yPositions.length - 1) {
window.scrollTo(0, yPositions[scroll.currentSectionIndex + 1])
setScroll(scroll.currentSectionIndex = scroll.currentSectionIndex + 1)
}
else if (!isScrollDown && scroll.currentSectionIndex > 0) {
window.scrollTo(0, yPositions[scroll.currentSectionIndex - 1])
scroll.currentSectionIndex = scroll.currentSectionIndex - 1
}
}
let [scroll, setScroll] = useState({ currentSectionIndex: 0, offset: 0 });
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<div className="page">
<section className='section section__scroll'> ... контент полноэкранной секции 1 ... </section>
<section className='section section__scroll'> ... контент полноэкранной секции 2 ... </section>
<section className='section section__scroll'> ... контент полноэкранной секции 3 ... </section>
<section className='section section__scroll'> ... контент полноэкранной секции 4 ... </section>
</div>
С таким кодом при скролле вниз я сразу попадаю на последнюю секцию, а при скролле вверх - на первую, хотя в массив yPositions попадают y координаты всех секций. Я думаю, это из-за того, что window.scrollY быстро меняется. То есть когда немного проскролил колесиком, получил слишком большое значение к примеру 40 и поэтому попал на последнюю секцию. Как можно исправить такой баг?