react 스크롤 이벤트 헤더 감지

 

import { useScrollDirection } from 'react-use-scroll-direction'

export default function App() {
	const scrollDirection = useScrollDirection();
	console.log(scrollDirection)

	
	return (
		<div>
			<header className={`header ${ scrollDirection === "down" ? "hide" : "show"}`}>
			<h1>헤더입니다.
			</h1>
			</header>
			<p>
			orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id pellentesque elit. Cras velit mauris, ornare ac ipsum a, posuere rhoncus risus. Nam consequat nisi non nisl pretium, ut blandit felis luctus. In in erat luctus, condimentum quam quis, congue massa. Nam ornare diam ac massa imperdiet, non ultricies leo pellentesque. Aenean a enim ut risus sollicitudin auctor. Nunc non blandit turpis, et bibendum dui. Nam auctor orci fringilla hendrerit ultricies. Pellentesque vitae dignissim risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam et vestibulum leo, sed consequat mi.

			Cras dapibus ex ac eros bibendum, ut suscipit arcu fringilla. Sed semper justo ultrices nibh scelerisque, at ultricies tellus imperdiet. Cras non augue tortor. In hac habitasse platea dictumst. Morbi rhoncus gravida ipsum ac sodales. In interdum pretium erat, id fermentum mi posuere et. Maecenas egestas interdum tortor, pulvinar malesuada ante faucibus sollicitudin. Mauris non ultrices nisi. Curabitur sapien arcu, bibendum ac viverra ut, semper blandit nunc. Fusce congue a nulla in condimentum. Nam nisl neque, sollicitudin non ullamcorper a, mollis quis metus. Vestibulum commodo volutpat elit in vehicula. Praesent arcu tellus, luctus nec diam vitae, efficitur commodo purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut quis quam et enim consequat vehicula placerat id nibh. Donec maximus dictum ex, vitae iaculis sapien fermentum quis.

			Quisque posuere posuere enim, eget tristique lacus ullamcorper ullamcorper. Curabitur lorem sem, lacinia in dapibus convallis, scelerisque nec nibh. Sed feugiat lectus eu arcu mollis, vel dignissim arcu euismod. Proin pulvinar nisi sed neque ultricies egestas. Ut vulputate lectus vel elit tincidunt volutpat. Nulla aliquet erat ut metus hendrerit scelerisque. Morbi tempus, nulla ullamcorper rhoncus hendrerit, dui eros gravida sem, a elementum arcu ipsum at sapien. Integer augue mauris, eleifend ac dolor ac, porta facilisis odio. Donec consequat vestibulum ipsum, eu tempor lorem porta nec. Nullam porttitor ultrices erat vitae imperdiet. Mauris luctus, nulla ac faucibus rhoncus, dui orci lobortis nisi, at maximus mi ex in urna. Aliquam erat volutpat. Ut vitae ullamcorper nisl. Fusce non velit vestibulum, ornare tortor id, egestas justo.

			Cras quis enim et ex pretium viverra eu non est. Pellentesque et sapien a nunc tristique dignissim id dictum mi. Maecenas lobortis posuere odio. Aenean suscipit placerat nibh vitae ultrices. Vivamus viverra lacus ut ornare pellentesque. Mauris pretium risus sit amet volutpat sollicitudin. Curabitur scelerisque velit at mollis aliquam. Cras porttitor lacus leo, ac dapibus metus vestibulum non. Donec ante urna, posuere vel porta eget, porta sit amet nibh. Fusce pellentesque magna et diam ornare lobortis. Mauris posuere, mauris non ornare pellentesque, felis nunc scelerisque dolor, quis dictum magna sapien quis est. Suspendisse fermentum lobortis lacus, nec pulvinar nunc mattis ac. Etiam ultricies leo mi, quis lacinia dui convallis eget. Cras quis velit at lectus iaculis faucibus. Proin tempus, sem vitae scelerisque viverra, urna mauris congue quam, non feugiat massa justo in ipsum. Aenean eget tortor nec ligula tincidunt eleifend imperdiet at est.

			Nunc semper nunc ac tempus faucibus. Mauris a nunc sed libero mollis lacinia. Aenean mattis nisi tincidunt lorem scelerisque, sed molestie sapien pretium. Donec id pellentesque eros. Quisque aliquam consequat purus, id vehicula justo consequat eget. Donec ut tempor arcu, non euismod diam. Nullam sollicitudin maximus odio, id fringilla lorem ultrices vel. Donec convallis faucibus lacinia. Nulla pellentesque magna felis, et ultricies tellus pulvinar vestibulum. Suspendisse in dolor in tortor viverra commodo nec a dui.

			Nam fringilla varius leo vehicula lobortis. Nunc sollicitudin orci eu augue suscipit semper. Nam ultricies, sapien cursus suscipit blandit, ex ex blandit felis, dictum finibus tortor purus id sem. Donec suscipit quis nisl ac pharetra. Vivamus eget eleifend risus, ornare egestas quam. Donec tempor volutpat tincidunt. Vivamus lacus felis, tempor id ullamcorper eget, congue ac dolor. Morbi nec fermentum ipsum, a porta arcu. Maecenas quis porta libero. Praesent interdum diam urna, rutrum placerat odio elementum auctor. Integer id ante eu eros facilisis feugiat. Morbi condimentum ante id pretium vestibulum.

			Suspendisse potenti. Mauris facilisis ultricies rutrum. Sed a felis varius, molestie tortor in, molestie sem. Nam non commodo nisl, ornare imperdiet diam. Fusce lorem neque, viverra id efficitur et, consectetur non elit. Integer aliquam libero id diam pretium dictum. Sed molestie lorem non nibh auctor, vitae porttitor massa elementum. Suspendisse aliquet tristique sem non pharetra. Aliquam et ligula lacus.

			Integer posuere lacus nec arcu fringilla tristique. In pretium ex non ligula congue, ac porta dolor varius. Cras sit amet nisi sapien. Donec at odio diam. Aenean laoreet erat venenatis elit laoreet, ac gravida est euismod. Maecenas placerat mattis purus, vitae lacinia orci dignissim et. Aliquam vitae eros turpis. Nulla ac augue dignissim nisi ultrices viverra. Donec efficitur ante sapien, mollis gravida turpis feugiat eleifend. Curabitur viverra quis neque sit amet feugiat. Aenean in sapien a tellus pulvinar venenatis vel ac ex. Aliquam fermentum magna ipsum, sit amet condimentum odio vulputate eu. Nullam varius tortor non sodales maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate, orci in consequat venenatis, lorem est rhoncus metus, quis efficitur elit diam a quam. Integer et neque et sem varius porttitor.

			Maecenas a accumsan dui, et imperdiet velit. Quisque eu lobortis arcu. Vivamus porttitor, nisl eget dignissim maximus, ipsum enim lacinia tellus, vitae suscipit ex nibh eu ipsum. Fusce pretium mollis tristique. Etiam iaculis, arcu quis consectetur placerat, dui ante porttitor magna, convallis tempus odio arcu eget orci. Nunc laoreet bibendum lectus nec imperdiet. Sed tincidunt ullamcorper quam, sit amet ultrices purus finibus at. Phasellus imperdiet consectetur neque a efficitur. Morbi in eleifend ante. Donec maximus tortor non pretium pretium. Maecenas ultrices nulla ut diam sagittis interdum.

			Praesent et felis laoreet, consequat odio in, maximus velit. Aliquam erat volutpat. Cras quis suscipit nunc. Fusce feugiat volutpat malesuada. Quisque vulputate rhoncus ornare. Suspendisse in consequat odio, et vehicula nisi. Duis tempus in libero eu ornare. Aliquam semper rutrum leo a porttitor. Phasellus eu tortor sit amet nisl congue laoreet id vulputate risus. Morbi sollicitudin eleifend odio, non imperdiet mi fermentum et. Aliquam ultricies nisl sed urna feugiat, quis dignissim sapien tincidunt. Suspendisse scelerisque lacus sit amet dui auctor, ut ultricies neque vehicula. Praesent feugiat risus vitae felis elementum, ac convallis magna semper. Fusce vel purus dui. </p>
			<p> orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id pellentesque elit. Cras velit mauris, ornare ac ipsum a, posuere rhoncus risus. Nam consequat nisi non nisl pretium, ut blandit felis luctus. In in erat luctus, condimentum quam quis, congue massa. Nam ornare diam ac massa imperdiet, non ultricies leo pellentesque. Aenean a enim ut risus sollicitudin auctor. Nunc non blandit turpis, et bibendum dui. Nam auctor orci fringilla hendrerit ultricies. Pellentesque vitae dignissim risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam et vestibulum leo, sed consequat mi.

			Cras dapibus ex ac eros bibendum, ut suscipit arcu fringilla. Sed semper justo ultrices nibh scelerisque, at ultricies tellus imperdiet. Cras non augue tortor. In hac habitasse platea dictumst. Morbi rhoncus gravida ipsum ac sodales. In interdum pretium erat, id fermentum mi posuere et. Maecenas egestas interdum tortor, pulvinar malesuada ante faucibus sollicitudin. Mauris non ultrices nisi. Curabitur sapien arcu, bibendum ac viverra ut, semper blandit nunc. Fusce congue a nulla in condimentum. Nam nisl neque, sollicitudin non ullamcorper a, mollis quis metus. Vestibulum commodo volutpat elit in vehicula. Praesent arcu tellus, luctus nec diam vitae, efficitur commodo purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut quis quam et enim consequat vehicula placerat id nibh. Donec maximus dictum ex, vitae iaculis sapien fermentum quis.

			Quisque posuere posuere enim, eget tristique lacus ullamcorper ullamcorper. Curabitur lorem sem, lacinia in dapibus convallis, scelerisque nec nibh. Sed feugiat lectus eu arcu mollis, vel dignissim arcu euismod. Proin pulvinar nisi sed neque ultricies egestas. Ut vulputate lectus vel elit tincidunt volutpat. Nulla aliquet erat ut metus hendrerit scelerisque. Morbi tempus, nulla ullamcorper rhoncus hendrerit, dui eros gravida sem, a elementum arcu ipsum at sapien. Integer augue mauris, eleifend ac dolor ac, porta facilisis odio. Donec consequat vestibulum ipsum, eu tempor lorem porta nec. Nullam porttitor ultrices erat vitae imperdiet. Mauris luctus, nulla ac faucibus rhoncus, dui orci lobortis nisi, at maximus mi ex in urna. Aliquam erat volutpat. Ut vitae ullamcorper nisl. Fusce non velit vestibulum, ornare tortor id, egestas justo.

			Cras quis enim et ex pretium viverra eu non est. Pellentesque et sapien a nunc tristique dignissim id dictum mi. Maecenas lobortis posuere odio. Aenean suscipit placerat nibh vitae ultrices. Vivamus viverra lacus ut ornare pellentesque. Mauris pretium risus sit amet volutpat sollicitudin. Curabitur scelerisque velit at mollis aliquam. Cras porttitor lacus leo, ac dapibus metus vestibulum non. Donec ante urna, posuere vel porta eget, porta sit amet nibh. Fusce pellentesque magna et diam ornare lobortis. Mauris posuere, mauris non ornare pellentesque, felis nunc scelerisque dolor, quis dictum magna sapien quis est. Suspendisse fermentum lobortis lacus, nec pulvinar nunc mattis ac. Etiam ultricies leo mi, quis lacinia dui convallis eget. Cras quis velit at lectus iaculis faucibus. Proin tempus, sem vitae scelerisque viverra, urna mauris congue quam, non feugiat massa justo in ipsum. Aenean eget tortor nec ligula tincidunt eleifend imperdiet at est.

			Nunc semper nunc ac tempus faucibus. Mauris a nunc sed libero mollis lacinia. Aenean mattis nisi tincidunt lorem scelerisque, sed molestie sapien pretium. Donec id pellentesque eros. Quisque aliquam consequat purus, id vehicula justo consequat eget. Donec ut tempor arcu, non euismod diam. Nullam sollicitudin maximus odio, id fringilla lorem ultrices vel. Donec convallis faucibus lacinia. Nulla pellentesque magna felis, et ultricies tellus pulvinar vestibulum. Suspendisse in dolor in tortor viverra commodo nec a dui.

			Nam fringilla varius leo vehicula lobortis. Nunc sollicitudin orci eu augue suscipit semper. Nam ultricies, sapien cursus suscipit blandit, ex ex blandit felis, dictum finibus tortor purus id sem. Donec suscipit quis nisl ac pharetra. Vivamus eget eleifend risus, ornare egestas quam. Donec tempor volutpat tincidunt. Vivamus lacus felis, tempor id ullamcorper eget, congue ac dolor. Morbi nec fermentum ipsum, a porta arcu. Maecenas quis porta libero. Praesent interdum diam urna, rutrum placerat odio elementum auctor. Integer id ante eu eros facilisis feugiat. Morbi condimentum ante id pretium vestibulum.

			Suspendisse potenti. Mauris facilisis ultricies rutrum. Sed a felis varius, molestie tortor in, molestie sem. Nam non commodo nisl, ornare imperdiet diam. Fusce lorem neque, viverra id efficitur et, consectetur non elit. Integer aliquam libero id diam pretium dictum. Sed molestie lorem non nibh auctor, vitae porttitor massa elementum. Suspendisse aliquet tristique sem non pharetra. Aliquam et ligula lacus.

			Integer posuere lacus nec arcu fringilla tristique. In pretium ex non ligula congue, ac porta dolor varius. Cras sit amet nisi sapien. Donec at odio diam. Aenean laoreet erat venenatis elit laoreet, ac gravida est euismod. Maecenas placerat mattis purus, vitae lacinia orci dignissim et. Aliquam vitae eros turpis. Nulla ac augue dignissim nisi ultrices viverra. Donec efficitur ante sapien, mollis gravida turpis feugiat eleifend. Curabitur viverra quis neque sit amet feugiat. Aenean in sapien a tellus pulvinar venenatis vel ac ex. Aliquam fermentum magna ipsum, sit amet condimentum odio vulputate eu. Nullam varius tortor non sodales maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate, orci in consequat venenatis, lorem est rhoncus metus, quis efficitur elit diam a quam. Integer et neque et sem varius porttitor.

			Maecenas a accumsan dui, et imperdiet velit. Quisque eu lobortis arcu. Vivamus porttitor, nisl eget dignissim maximus, ipsum enim lacinia tellus, vitae suscipit ex nibh eu ipsum. Fusce pretium mollis tristique. Etiam iaculis, arcu quis consectetur placerat, dui ante porttitor magna, convallis tempus odio arcu eget orci. Nunc laoreet bibendum lectus nec imperdiet. Sed tincidunt ullamcorper quam, sit amet ultrices purus finibus at. Phasellus imperdiet consectetur neque a efficitur. Morbi in eleifend ante. Donec maximus tortor non pretium pretium. Maecenas ultrices nulla ut diam sagittis interdum.

			Praesent et felis laoreet, consequat odio in, maximus velit. Aliquam erat volutpat. Cras quis suscipit nunc. Fusce feugiat volutpat malesuada. Quisque vulputate rhoncus ornare. Suspendisse in consequat odio, et vehicula nisi. Duis tempus in libero eu ornare. Aliquam semper rutrum leo a porttitor. Phasellus eu tortor sit amet nisl congue laoreet id vulputate risus. Morbi sollicitudin eleifend odio, non imperdiet mi fermentum et. Aliquam ultricies nisl sed urna feugiat, quis dignissim sapien tincidunt. Suspendisse scelerisque lacus sit amet dui auctor, ut ultricies neque vehicula. Praesent feugiat risus vitae felis elementum, ac convallis magna semper. Fusce vel purus dui.
			</p>

		</div>
	)
}
function useScrollDirection() {
  const [scrollDirection, setScrollDirection] = useState(null);

  useEffect(() => {
    let lastScrollY = window.pageYOffset;
		console.log("라스트 스크롤",lastScrollY);

    const updateScrollDirection = () => {
      const scrollY = window.pageYOffset;
			console.log("스크롤 와이",scrollY)
			
      const direction = scrollY > lastScrollY ? "down" : "up";
      if (direction !== scrollDirection && (scrollY - lastScrollY >5 || scrollY - lastScrollY < -5)) {
        setScrollDirection(direction);
      }
      lastScrollY = scrollY > 0 ? scrollY : 0;
    };
    window.addEventListener("scroll", updateScrollDirection); // add event listener
    return () => {
      window.removeEventListener("scroll", updateScrollDirection); // clean up
    }
  }, [scrollDirection]);

  return scrollDirection;
};

css 부분

.header {
  position: sticky;
  top: 0px;
  background-color: #BFDBFE;
  height: 6rem;
  transition-property: all; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.header.hide {
  top: -6rem;
}

 

🌈 구현하고 싶은 로직 

1. 스크롤을 내릴땐 헤더가 보이지 않는다. 

2. 스크롤을 올릴땐 헤더가 보인다.

 

---

• 스크롤 이벤트를 할때 up 인지 down 인지를 담아줄 useState 를 만들어준다. 
• const [scrollDirection , setScrollDirection ] = useState(null);
•  useEffect 안에 scroll 을 할때마다 바뀌는 값을 통해 실시간 변경을 해줄것이다.
• 바뀌는 값은 window.pageYOffset 을 통해 알 수 있다.  첫 페이지를 띄우면 0 이 나온다.
• window.addEventListener("scroll", '이벤트 작동할 함수'); 을 통해 스크롤 값이 변할때마다 실행될 값을 함수를 만들어 준다.
• const 이벤트 작동할 함수 = ( ) => {  const scrollY = window.pageYOffset }  
• 여기서 useEffect 안에서 scrollY가 들어가 있는데 > last ScrollY 보다 크다면? "down" 아니면 " up " 이 된다.
• 그 값을 direction 이 down 인지 up 인지 변수로 받는다.
• lastScrollY = scrollY 가 0 보다 크면 scrollY 값을 넣고 아니면 0 값을 넣어준다.
• useEffect 는 scrollDirection 의 값이 바뀔때바다 실행된다.
• return scrollDirection을 통해 해당 함수의 값을 다른 곳에서 (app)사용할 수 있도록 retrun 해준다.
• App 함수안에서 useScrollDirection 함수를 불러와 scrollDirection 변수에 넣어준다.
• scrollDirection 값이 "down " 이면 "hide" 라는 클레스네임을 아니면 "show"라는 클레스 네임을 작성해준다.
• css 를 보면 hide를 작성 했을때 top: -6rem 이 되어 화면상 위로 올라가는 효과를 준다.
•  

if (direction !== scrollDirection && (scrollY - lastScrollY >5 || scrollY - lastScrollY < -5)) {
        setScrollDirection(direction);
      }

여기서 이부분은 스크롤이 올렸다 내렸다 할때 바로바로 실행되면 정신이 없기 때문에 조금의 시간차를 두기위해 작성한 것 이다.

자세한건 나도 잘모르니... 해당 링크를 타고 들어가서 확인하면 될 것 같다..https://www.codemzy.com/blog/react-hook-scroll-direction-event-listener

마우스 휠을 내렸을때 헤더가 사라진다.

 

 

완벽히 이해가 가지 않았지만 유용하게 사용할 것 같다.. 생각보다 스크롤 헤더 감지 리액트 코드는 찾기가 어려웠기에 ㅠㅠ