React JS 및 Lenis의 부드러운 스크롤에서 화면을 전환할 때 맨 위로 스크롤하는 방법
P粉662614213
P粉662614213 2023-08-18 09:58:58
0
1
596
<p>부드러운 스크롤을 위해 lenis를 사용하고 있으며 App.js에서 사용하는 ScrollToTop.js 파일이 있습니다. 페이지가 스크롤되지 않을 때는 제대로 작동하지만 다른 페이지로 이동하는 버튼을 클릭하고 "부드러운 스크롤"이 발생하면 scrollToTop이 작동하지 않습니다. 이 문제를 해결하는 방법을 아는 사람이 있습니까? </p> <p>ScrollToTop.js</p> <pre class="brush:php;toolbar:false;">"반응"에서 { useEffect }를 가져옵니다. "react-router-dom"에서 import { useLocation }; "gsap"에서 { gsap }을 가져옵니다. "./constants"에서 { 색상 }을 가져옵니다. 기본 함수 ScrollToTop() 내보내기 { const { 경로명 } = useLocation(); const body = document.querySelector("body"); useEffect(() => { window.scrollTo(0, 0); // gsap.to(body, { 지속 시간: 0, backgroundColor: colors.white }); }, [경로명]); null을 반환; }</pre> <p>모든 페이지에서 useLayoutEffect를 사용해 보았지만 작동하지 않습니다</p>
P粉662614213
P粉662614213

모든 응답(1)
P粉198814372

다른 사람들이 지적했듯이 Routes 구성 요소를 ScrollToTop 구성 요소로 래핑하고 있지만 암시적 하위 속성을 렌더링하도록 편집하기보다는 React 후크로 변환하는 것이 좋습니다. 특히 실제로는 렌더링하지 않는 콘텐츠를 고려하면 더욱 그렇습니다. 탐색의 부작용으로 실행되기를 원합니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!