So scrollen Sie beim Bildschirmwechsel in React JS und Lenis Smooth Scrolling zurück nach oben
P粉662614213
P粉662614213 2023-08-18 09:58:58
0
1
552

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?

ScrollToTop.js

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; }

Ich habe versucht, useLayoutEffect auf jeder Seite zu verwenden, aber es funktioniert nicht

P粉662614213
P粉662614213

Antworte allen (1)
P粉198814372

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

    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!