스크롤 바 숨기기

드롭다운, 페이지, 리스트 등 다양한 컴포넌트들을 구현할 때 스크롤 바를 없애고 싶은 경우가 있습니다.

현재 진행 중인 프로젝트에서 스크롤 바를 없애기 위해 방법을 찾아봤더니 정말 간단한 방법이 있었습니다.

Tailwind CSS를 사용 중이라 Tailwind CSS 관련 스크롤 바 숨김 처리 방법을 찾던 도중

[tailwind css] 스크롤 안보이게 하기 라는 제목의 블로그를 보았습니다.

이 블로그에는 두가지 방법이 나와있는데 나는 첫번째 방법을 실행하였습니다.

1. 일단 관련 플러그인을 설치한다.

yarn add tailwind-scrollbar-hide

npm install tailwind-scrollbar-hide

2. 다음으로는 tailwind config 파일에 해당 문장을 추가

//tailwind.config.js

module.exports = {
  ...
  // 이 부분을 추가
  plugins: [require("tailwind-scrollbar-hide")],
};

3. 그리고 실제 코드에 적용 (scrollbar-hide 입력)

 <ul className="... overflow-y-auto scrollbar-hide">
     ...
    </ul>

...은 생략입니다.

아이템들이 3개 이상이 있음에도 불구하고 스크롤 바가 사라짐을 확인할 수 있습니다.