Heim  >  Fragen und Antworten  >  Hauptteil

So scrollen Sie beim Bildschirmwechsel in React JS und Lenis Smooth Scrolling zurück nach oben

<p>Ich verwende Lenis, um einen reibungslosen Bildlauf zu erreichen, und ich habe eine ScrollToTop.js-Datei, die ich in meiner App.js verwende. Es funktioniert gut, wenn die Seite nicht scrollt, aber wenn ich auf eine Schaltfläche klicke, die mich zu einer anderen Seite führt und das „sanfte Scrollen“ stattfindet, funktioniert scrollToTop nicht. Weiß jemand, wie man das beheben kann? </p> <p>ScrollToTop.js</p> <pre class="brush:php;toolbar:false;">import { useEffect } from "react"; import { useLocation } from „react-router-dom“; import {gsap} aus „gsap“; import { farben } aus "./constants"; Exportieren Sie die Standardfunktion ScrollToTop() { const { Pfadname } = useLocation(); const body = document.querySelector("body"); useEffect(() => { window.scrollTo(0, 0); // gsap.to(body, { Dauer: 0, Hintergrundfarbe: Farben.weiß }); }, [Pfadname]); null zurückgeben; }</pre> <p>Ich habe versucht, useLayoutEffect auf jeder Seite zu verwenden, aber es funktioniert nicht</p>
P粉662614213P粉662614213450 Tage vor631

Antworte allen(1)Ich werde antworten

  • P粉198814372

    P粉1988143722023-08-19 09:18:53

    正如其他人指出的那样,您正在使用ScrollToTop组件包装您的Routes组件,但是我建议将其转换为React钩子,而不是编辑它以呈现其隐式children属性,特别是考虑到它实际上并不呈现任何内容,您希望它作为导航的副作用运行。

    Antwort
    0
  • StornierenAntwort