lundi 6 décembre 2021

jump to next view while scrolling in reactjs

I'm trying to implement a scroll effect where I have a slide-like web page, and I want make the scroll bar jump to the next slide/section while scrolling -if scrolling up jump to the above section otherwise jump to the section below the current section-. the code below is my attempt, I used "jump.js" to jump into the target section, and in order to detect the scrolling direction I use "y > window.scrollY" condition, but the problem is is that a single scroll trigger the function over 200 times what makes it enter an endless loop. any solution of the problem ?

const [y, setY] = useState(0);
let sectionN = 1
const handleNavigation = (e) => {
    const window = e.currentTarget;
        if (y > window.scrollY && sectionN > 1) {
            sectionN -= 1;
            const targetSection = `.section-${sectionN}`;
            jump(targetSection);
        } else if (y < window.scrollY && sectionN < 6) {
            sectionN += 1;
            const targetSection = `.section-${sectionN}`;
            jump(targetSection);
        }
        setY(window.scrollY);
  };



Aucun commentaire:

Enregistrer un commentaire