React 스크롤시 Fix 하기 (Window scroll)

스크롤바를 어느 값만큼 내리면 특정 엘레먼트의 css 속성이 변경되어야 하는 경우가 종종 있습니다. 

우선 해당 환경을 만들기 위해 마크업을 합니다. 

 

Window가 아닌 div 스크롤인 경우 

 

- App.js

<div className="App">
      <div className="fixedBox">'I will be fixed! 😘'</div>
      <div className="content" style={{fontSize: '22px'}}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        ... // 스크롤이 생길때까지 복붙
      </div>
</div>

- App.css

.fixedBox {
  position: fixed; 
  top: 50px; 
  right: 20px;
  z-index: 1;
  padding: 10px; 
  background: lightseagreen; 
  border-radius: 6px;
  color: #fff;
  border: 1px solid rgb(23, 122, 117);
  text-align: left;
}

마크업이 완료된 화면

이 상태에서 300정도 스크롤을 했을때 'I will be fixed!' 라는 문구를 'I am fixed!' 로 바꾸고, 

최상단에 고정하기 위해 top: 0 를 주도록 하겠습니다. 

직접 css를 컨트롤 하지 않고 fixed라는 클래스를 가지고 컨트롤을 하겠습니다. 

 

- App.css

{  ...  }

.fixedBox.fixed {
  width: 100%; 
  top: 0; 
  right: 0;
  font-size: 22px;
  border-radius: 0;
  text-align: center;
}

 

- App.js

    const [ScrollActive, setScrollActive] = useState(false);
    
    <div className="App">
      <div className={ScrollActive ? "fixedBox fixed" : "fixedBox"}>
        {
          ScrollActive ? 
            'I am fixed! 😎' : 
            'I will be fixed! 😘'
        }
      </div>
      {/* <ElementScroll/> */}
      <div className="content" style={{fontSize: '22px'}}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. <br />
        { ... }
      </div>
    </div>

ScrollActive 라는 state가 true 일때는 fixedBox 에 fixed 클래스를 추가하고 'I am fixed! 😎' 라는 문구를 출력 하도록 하고, flase 일때는 fixedBox 클래스에 'I will be fixed! 😘' 라는 문구를 출력 합니다. 

top 에 붙고 width가 변경되는 부분은 모두 .fixedBox.fixed 클래스명을 참조한 css에서 변경할 수 있습니다. 

 

그러면 핵심이자 남은 부분은 window 스크롤의 값을 확인하여 300 이상인 경우 ScrollActive 의 값을 true 로 이하인 경우는 다시 false로 변경해 주는 일만 남았습니다. 

 

- scroll 값을 가져오기 : window.pageYOffset

- scroll 행위 여부를 판단하기 : addEventListener 

 

  const [ScrollY, setScrollY] = useState(0); // window 의 pageYOffset값을 저장 
  const [ScrollActive, setScrollActive] = useState(false); 
  function handleScroll() { 
      if(ScrollY > 299) {
          setScrollY(window.pageYOffset);
          setScrollActive(true);
      } else {
          setScrollY(window.pageYOffset);
          setScrollActive(false);
      }
  }
  useEffect(() => {
      function scrollListener() {  window.addEventListener("scroll", handleScroll); } //  window 에서 스크롤을 감시 시작
      scrollListener(); // window 에서 스크롤을 감시
      return () => { window.removeEventListener("scroll", handleScroll); }; //  window 에서 스크롤을 감시를 종료
  });

 

useEffect 로 실시간 감시를 해줘야하는데, 주의할 점은 반드시 이벤트리스너를 삭제해 줘야 스크롤할때 2-3번씩 렌더 되지 않습니다. 

 

---

전체 소스