-
React / scroll stop 하면 나오는 배너 만들기Web dev/React 2022. 4. 16. 15:02728x90반응형
리엑트로 포트폴리오를 만들오 있다.
socar 프로모션페이지를 기획하여 만드는중이다.
쏘카 홈페이지도 그렇듯 앱 다운로드로 유도를 한다. 나도 앱다운로드를 유도하는 배너를 만들어 보았다.
움직이면사라지고 멈추면 생기는 배너이다.
클래스를 하나 만들어 스크롤이 멈추면 클래스를 부여하고 움직이면 클래스를 삭제해주었다.
이벤트를 줄때 에러가 자꾸 발생해서 useEffect로 감싸주었더니 에러없이 잘동작했다.
import React, { useRef } from 'react' import { useEffect } from 'react'; import { Link } from 'react-router-dom' export default function GoStore() { const goStore = useRef(); function createScrollStopListener(element, callback, timeout) { let handle = null; let onScroll = function() { if (handle) { clearTimeout(handle); } handle = setTimeout(callback, timeout || 50); }; element.addEventListener('scroll', onScroll); return function() { element.removeEventListener('scroll', onScroll); }; } useEffect(() => { window.addEventListener("scroll" , () => { goStore.current.classList.remove("show-store") }) createScrollStopListener(window, () => { goStore.current.classList.add("show-store") }); },[]) return ( <> <div className='go-store' ref={goStore}> <Link to="/"> <img src="/images/logo-store.png" alt="" /> <span>앱 다운로드</span> </Link> </div> </> ) }
728x90반응형'Web dev > React' 카테고리의 다른 글
React / react-router-dom <Link /> 페이지 이동시 스크롤 상단위치 이슈 해결방법 (0) 2022.04.28 React / useState, useEffect 로 background parallax 구현하기 (0) 2022.04.28 React / heroku 에 json-server 배포하기 React deploy (0) 2022.04.16 React / json-server 로 쉽고 빠르게 API , server 만들기 (0) 2022.04.16 React / 아코디언 메뉴 만들기 (0) 2022.03.30