Next.js - 가로 스크롤 바 구현

📌가로 스크롤바 구현 

page.js

"use client";
import { useState, useEffect, useRef } from "react";
import gsap from "gsap";

export default function page() {
  const scrollSectionRef = useRef(null);
  const scrollContentRef = useRef(null);
  
    useEffect(() => {
    const scrollSection = scrollSectionRef.current;
    const scrollContent = scrollContentRef.current;

    const handleScroll = () => {

      const scrolled = window.pageYOffset;
      const sectionOffset = Math.abs(scrollSection.offsetTop - scrolled);
      const notReachedBottom = parseInt(
        Math.max(
          0,
          scrollSection.getBoundingClientRect().bottom - window.innerHeight
        )
      );

      if (scrollSection.offsetTop <= scrolled && notReachedBottom) {
        gsap.to(scrollContent, {
          x: -sectionOffset,
        });
      }
    };

    document.addEventListener("scroll", handleScroll);

    // Clean up the event listener on component unmount
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, []); // Empty dependency array to run the effect only once on mount


  return (
    <>
       <section id="projects" ref={scrollSectionRef}>
          <div className="horizontal_scroll_wrap">
            <div className="horizontal_scroll_content" ref={scrollContentRef}>
            	 <div className="about_project"></div>
                 <div className="about_project"></div>
                 <div className="about_project"></div>
                 <div className="about_project"></div>
            </div>
         </div>
      </section>
    </>
  );
}

 

css

/* height값이 scroll전체 width 값이 된다.about-project개수따라 height값 늘리기 */

#projects {
    background-color: #B39C7A;
    position: relative;
    height: 1180vh;
}

.horizontal_scroll_wrap {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;
}

/* scroll_width값 설정 - about-project개수따라 width값 늘리기 */
.horizontal_scroll_content {
    display: flex;
    height: 100vh;
    width: 600vw;
    will-change: transform;
    margin: 2vh 0 0 3vw;
}

 

scrollSectionRef와 scrollContentRef

• 각각 스크롤 섹션과 스크롤 컨텐츠에 대한 React Ref이다. 
• 이를 통해 해당 DOM 요소에 접근할 수 있다.

const scrolled = window.pageYOffset

• window.pageYOffset 는 scrollY의 다른 이름이다. 스크롤이 수직으로 얼마나 스크롤( 세로 스크롤) 됐는지 픽셀단위로 반환한다.
• 이 값을 scrolled 변수에 할당하여 현재 스크롤된 위치를 저장한다.

const sectionOffset = Math.abs(scrollSection.offsetTop - scrolled)

• scrollSection은 scrollSectionRef를 통해 참조한 스크롤 섹션의 DOM 요소이다.
• scrollSection.offsetTop은 섹션의 상단이 전체 뷰포트의 상단에서 얼마나 떨어져 있는지를 나타낸다.
• scrolled는 이미 계산된 현재 스크롤 위치입니다.
• Math.abs 함수를 사용하여 두 값 간의 차이를 절대값으로 계산합니다.
• 이렇게 함으로써 세로 스크롤 위치와 섹션의 상단 위치 사이의 상대적인 거리를 계산하고, sectionOffset 변수에 저장합니다.

scrollSection.offsetTop는 스크롤 섹션의 상단 위치를 나타내는 고정된 값이며,

scrolled는 현재 사용자가 스크롤한 위치를 동적으로 나타내는 값이다.

 

notReachedBottom

• scrollSection.getBoundingClientRect().bottom은 스크롤 섹션의 아래쪽 경계(bottom)이 현재 뷰포트에서 얼마나 떨어져 있는지를 나타낸다.
• window.innerHeight는 현재 뷰포트의 높이를 나타낸다.
• Math.max(0, ...)를 사용하여 0보다 작은 값을 방지하고, parseInt를 통해 정수로 변환.
• 이렇게 계산된 notReachedBottom은 스크롤 섹션의 아래쪽이 뷰포트 안에 있지 않은 경우, 즉 뷰포트 아래로 스크롤되었을 때 0 이상의 값을 가지게 된다.

 

if (scrollSection.offsetTop <= scrolled && notReachedBottom)

{  gsap.to(scrollContent, {  x: -sectionOffset,  });  }

• 조건문은 현재 세로 스크롤 위치(scrolled)가 스크롤 섹션의 상단 위치(scrollSection.offsetTop)보다 크거나 같고, notReachedBottom이 0보다 큰 경우에 참이 된다.
• 이 조건은 세로 스크롤 위치가 스크롤 섹션에 도달하고 동시에 섹션이 뷰포트 아래로 넘어가지 않은 경우를 의미한다.
• 만약 조건이 참이라면 (notReachedBottom이 0보다 크면서 세로 스크롤 위치가 스크롤 섹션에 도달한 경우), gsap.to를 사용하여 scrollContent의 X 좌표를 -sectionOffset 만큼 이동시킨다.
• { x: -sectionOffset }는 애니메이션의 속성 설정이다. 여기서 x는 가로 방향의 이동을 나타내고, -sectionOffset은 그 이동 거리이다.
• 이로써 가로 스크롤 효과를 부여하게 된다.

 

 

※크기 및 위치와 관련된 메소드 

• clientWidth : 요소의 가로 값(마진/보더 불포함)
• clientHeight : 요소의 세로 값(마진/보더 불포함)
• clientTop : 요소의 Y축 위치 값(부모 기준)
• clientLeft : 요소의 X축 위치 값(부모 기준)
• offsetWidth : 요소의 가로 값(보더/패딩 포함)
• offsetHeight : 요소의 세로 값(보더/패딩 포함)
• offsetTop : 요소의 Y축 위치 값(문서 기준)
• offsetLeft : 요소의 X축 위치 값(문서 기준)
• offsetParent: 부모 요소를 기준으로 위치 정보
• getBoundingClientRect() 메서드 : 요소의 크기 및 위치 정보
• getClientRect() 메서드 : 요소의 크기 및 위치 정보

 

📌최종 구현 동영상

가로 스크롤 바 구현

 

 

참고자료 

• https://webstoryboy.co.kr/1738