[프로젝트 8- 스크롤로 페이지 세로로 넘기기]

정대만·2023년 4월 23일
0

js-project

목록 보기
7/7
post-thumbnail
var [count, setcount] = useState(0);

// count 값으로 use Effect 설정 < 변할때만 


  const Ref = useRef([]);
  // Ref 으로 잡는다 ( querySElector 라고 생각)
  
  // 스크롤 하는거 에 따라 보여주는 페이지 다르게 
  
  const hh = function () {
    if (count == 0) {
      Ref.current[1].scrollIntoView({ behavior: "smooth" });
      setcount(1);
    }
    else if (count == 1) {
      Ref.current[2].scrollIntoView({ behavior: "smooth" });
      setcount(2);
    }

  }
  const h1 = function () {
    if (count == 1) {
      setcount(0);
      Ref.current[0].scrollIntoView({ behavior: "smooth" });
    }
    else if (count == 2) {

      setcount(1)
      Ref.current[1].scrollIntoView({ behavior: "smooth" });

    }
    // else if( count==)

  }


//
  useEffect(() => {
    window.addEventListener('wheel', (e) => {
      e.preventDefault();
      console.log(e.deltaY);
      // 스크롤을 위로 하면 150 아래로 하면 고정값 -150을 보여줌
      
      if (e.deltaY == 150) {
        hh();
        // 함수 실행!
        

      }

      else if (e.deltaY < 150) {
        h1();

      }


    }, { passive: false })
    return () => {
      window.removeEventListener('wheel', hh)
      // 한번사용한 이벤트 는 이벤트 중복 피하기 위해 remove 함
      
    };

  }, [count])

profile
안녕하세요

0개의 댓글