position:fixed 고정 후, 스크롤

페이지의 헤더를 꾸미다 보니, position : fixed 를 쓰게 되었다.

말풍선 안에 글을 넣은 모습을 하고싶었는데, 다른 영역을 침범해야 원하는 위치로 갈 수 있어서 사용했다.

 

 

 

그 후, 메인 UI를 다듬고 스크롤을 하는데, 말풍선이 계속 따라다닌것을 알게 되었다. 

 

 

💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까?

→  스크롤 했을 때, 헤더를 없애면 말풍선도 자연스럽게 사라질 것.

 

  useEffect(() => {
    const handleScroll = () => {
      const scrollThreshold = 50;  // 스크롤 50px 을 임계값으로 설정
      const currentScrollY = window.scrollY; // 현재 스크롤 
      
       // 현재가 50px 이하일 경우, true 설정 헤더 숨기기 (return에서 조건 설정)
      setShowHeader(currentScrollY <= scrollThreshold);
  }
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

 

 

→  사라지기는 하지만, 임계점 근처에 가면 버퍼링 현상 처럼 헤더가 나타난다. 
     스크롤 이벤트가 빈번하게 일어나게 되면서 리액트가 렌더링을 자주 일으켜 이것이 버퍼링처럼 보이는 것이다.

     따라서, 이를 없애기 위해 스크롤의 방향을 감안한 코드를 만들게 되었습니다.

 

    +) 성능 최적화를 하는 방법이 있습니다.
        useEffect 훅에서 handleScroll 함수에 debounce로 딜레이를 주면, 일정 시간 동안 연속적인 이벤트 호출을 제한 할 수 있어
        스크롤 이벤트 빈도를 줄여 버퍼링 현상을 없앨 수 있습니다.

 

++) 버퍼링 현상을 사라지지만, 헤더가 자연스럽게 사라지고 나타나지는 않습니다. 하지만, 렌더링을 자주 일으켜 버퍼링이 일어나는 다른 상황에
       사용 가능할 것 같습니다.

 

 

 

 

💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까?

→  스크롤의 방향과 위치를 판단하여 헤더를 일정 부분에서 없애면 가능할 것.

 

    useEffect(() => {
    const handleScroll = () => {
      // 현재 스크롤 위치를 가져옵니다.
      const currentScrollPos = window.scrollY;

	  // 스크롤의 위치가 200이상일 때, 스크롤의 방향 확인
      if (currentScrollPos > 200) {
        const isScrollingUp =prevScrollPos > currentScrollPos;

        // 헤더가 스크롤 방향과 일치하면 보이게 하고, 반대라면 숨깁니다.
        setVisible(currentScrollPos <= 0 || isScrollingUp);
      }

      // 현재 스크롤 위치를 저장합니다.
      setPrevScrollPos(currentScrollPos);
    };

    // 스크롤 이벤트를 추가하고 컴포넌트가 언마운트될 때 이벤트를 제거합니다.
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [prevScrollPos]);

 

 

 

→  버퍼링 현상은 사라졌지만, 위치와 스크롤의 방향을 확인하고 헤더의 상태를 변경시키기 때문에

      아래로 내리다가 빠르게 위로 올렸을 경우, 헤더가 다시 보이기까지 시간이 걸린다.

   

 

 

 

💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까?

→  놀라운 사실을 알았습니다. 한 줄로 이 모든 것을 해결 시켜줄 수 있는 코드가 있습니다. 

 

 transform: translateY(0);

 

 

transform은 CSS의 변환 속성으로, translateY는 요소의 위치를 Y축 방향으로 이동시키는 기능입니다. (자세한 건 아래 링크로 확인)

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform-function/translate

translate() - CSS: Cascading Style Sheets | MDN

 

 

다른 UI 위치를 이동시키다가 translate() 의 존재를 깨달았습니다.
translateY(0)은 현재의 Y축 위치에서 이동하지 않겠다는 것을 의미합니다. 따라서 스크롤을 해도 따라서 내려오지 않고, 현 위치에서
움직이지 않습니다.

 

 

 

→  fixed 였던 헤더를 자연스럽게 만들 수 있게되었습니다.

      CSS 코드 한 줄로 모든 것을 해결하게 되어, 코드가 간결해졌습니다. 
      때로는 함수로 해결이 아닌 다른 방향으로 쉽게 해결이 가능하다는 것을 알게되어 기쁩니다.