Почему при скролле мышью скроллится только на последний и первый элементы?

Пытаюсь реализовать посекционный скролл колесиком мыши. Сейчас скроллится только к первой или последней секции на странице. Почему? Есть компонент:


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 и поэтому попал на последнюю секцию. Как можно исправить такой баг?


Ответы (0 шт):