INMATE / full-page-scroll 연습

매인 페이지와 정보 페이지에 사용할 예정인 full-page-scroll을 연습해봤다.

 

내가 느끼기로는 full-page-scroll을 사용했을 때 일반적인 스크롤 보다는

보다 깔끔하게 디자인이 가능할것 같아 공부해 적용하려한다.

일반적인 웹에서 보여지는 스크롤바를 없애기 위해 webkit-scrollbar를 사용했다.

바닐라JS를 공부할 때 한번 사용한 적이 있는데 자주 접하지 않아 낮설어서 명세서를 찾아봤다.

(다른 웹에서는 지원을 하지만 파이어폭스와 Android 파이어폭스에서는 지원하지 않는다....)

/* 화면에서 스크롤바 안보이게 */
body::-webkit-scrollbar {
  display: none;
}

위의 코드는 full-page-scroll이 적용되는 페이지의 최상단에 적용해도 되지만,

스크롤 넘김이 필요한 컴포넌트에 적용해야 하는 경우도 있다.

(내가 구성한 페이지에서는 Title바와 스크롤 넘김이 필요한 Info 컴포넌트가 있어서 Info컴포넌트에 적용했다.)

 

설정 후 다음과 같은 코드를 작성해주었다.

// index.js

// import './fullPageScroll.scss';
import { useEffect, useRef } from 'react';

const FullPageScroll = () => {
  const wrapperRef = useRef();
  useEffect(() => {
    const wheelHandler = (e) => {
      e.preventDefault();
      //  스크롤 행동 구현
      const { deltaY } = e; //  wheel 이벤트의 방향이 아래이면 양수, 위면 음수가 나옴
      const { scrollTop } = wrapperRef.current; //  스크롤 위쪽 끝부분의 위치
      const pageHeight = window.innerHeight;  //  화면의 세로 길이로써 100vh와 같음
      if (deltaY > 0) {
        //  스크롤 내릴 때
        //  현재 1페이지
        if (scrollTop >= 0 && scrollTop < pageHeight) {
          //  2페이지로 이동
          wrapperRef.current.scrollTo({
            top: pageHeight,
            left: 0,
            behavior: "smooth",
          });
        }
        //  현재 2페이지
        else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) {
          //  3페이지로 이동
          wrapperRef.current.scrollTo({
            top: pageHeight * 2,
            left: 0,
            behavior: "smooth",
          });
        }
          //  현재 3페이지
        else {
          //  3페이지로 이동
          wrapperRef.current.scrollTo({
            top: pageHeight * 2,
            left: 0,
            behavior: "smooth",
          });
        }
      }
      else {
        //  스크롤 올릴 때
        //  현재 1페이지
        if (scrollTop >= 0 && scrollTop < pageHeight) {
          //  1페이지로 이동
          wrapperRef.current.scrollTo({
            top: 0,
            left: 0,
            behavior: "smooth",
          });
        }
        //  현재 2페이지
        else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) {
          //  1페이지로 이동
          wrapperRef.current.scrollTo({
            top: 0,
            left: 0,
            behavior: "smooth",
          });
        }
          //  현재 3페이지
        else {
          //  2페이지로 이동
          wrapperRef.current.scrollTo({
            top: pageHeight,
            left: 0,
            behavior: "smooth",
          });
        }
      }
    };

    const wrapperRefCurrent = wrapperRef.current;
    wrapperRefCurrent.addEventListener("wheel", wheelHandler);
    return () => {
      wrapperRefCurrent.removeEventListener("wheel", wheelHandler);
    };
  }, []);
  return (
    <div ref={wrapperRef} className="inner_wrapper">
      <div className="inner y">1</div>
      <div className="inner b">2</div>
      <div className="inner p">3</div>
    </div>
  )
}

export default FullPageScroll;

// fullPageScroll.scss

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

//  Phone & Tablet
@media(max-width: 1023px){
  .inner_wrapper{
    // font-family: 'Noto Sans KR', sans-serif;
    // width: 100%;
    height: 100vh;
    overflow-y: auto;
    // display: flex;
    // justify-content: center;
    // padding: 15px 0px 25px 0px;

    .inner{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }
    
    .y{
      background-color: #757569;
    }
    .b{
      background-color: #b6d8f2;
    }
    .p{
      background-color: #f4cfdf;
    }
  }
  /* 화면에서 스크롤바 안보이게 */
  .inner_wrapper::-webkit-scrollbar {
  display: none;
  }
}

@media(min-width: 1024px){
  .inner_wrapper{
    // font-family: 'Noto Sans KR', sans-serif;
    height: 100%;
    overflow-y: auto;
    // width: 100%;
    // margin-bottom: 80px;

    .inner{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
    }
    
    .y{
      background-color: #757569;
    }
    .b{
      background-color: #b6d8f2;
    }
    .p{
      background-color: #f4cfdf;
    }
  }
  /* 화면에서 스크롤바 안보이게 */
  .inner_wrapper::-webkit-scrollbar {
  display: none;
  }
}

 

 

아래는 참고한 글의 링크를 걸어두겠다.

https://codingbroker.tistory.com/128

 

 

 

이번에는 처음 이 효과를 구현해보는 상황에서 full-page-scroll을 구현해주는 라이브러리를 사용하지않았다.

 

다음에는 라이브러리를 사용해서 구현해보는 경험도 좋을거 같다.