J'utilise react-full-page et cela fonctionne presque bien mais il y a 2 problèmes

  1. Quand je vais à un identifiant en cliquant dans mon ancre comme <a href='#someId'>Go There</a> ça va mais après le défilement, il revient là où il était avant le clic
  2. Lors de l'ouverture du lien de la page avec un identifiant comme http://localhost:3000/#someIdWhereIWantThePageToBeOpened, il reste en haut même lorsque j'ai désactivé le défilement de disableScroll.on();

Des suggestions pour les réparer ? Merci d'avance

1
Altro 4 sept. 2020 à 11:23

1 réponse

Meilleure réponse

Const [fullTog, setFullTog] = useState('normal');

let hrefPosition = window
    .location
    .href
    .substring(window.location.href.indexOf("#") + 1, window.location.href.length);
disableScroll.on();
useEffect(() => { 

    if (document.getElementById(hrefPosition) !== null) {
        disableScroll.off();

        let ind = 0;
        let toDeGoTo = setInterval(function () {
            if (ind === 10) {
                clearInterval(toDeGoTo);
                disableScroll.off();
            };
            document
                .getElementById(hrefPosition)
                .scrollIntoView({behavior: 'smooth'});
            ind++;
            console.log(ind);
        }, 200);
    } else {
        console.log(document.getElementById(hrefPosition));

        setTimeout(function () {
            disableScroll.off();
        }, 2000);
    }

    setTimeout(() => {
        setFullTog('full-page');
        disableScroll.off();
    }, 2000);

}, [])
1
Nairi Areg Hatspanyan 10 sept. 2020 à 06:55