Tailwind CSS로 스크롤바를 숨기는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.

스크롤 막대는 웹을 탐색할 때 우리 모두에게 익숙한 시각적 표시기이지만 개발자에게는 때때로 표시하고 싶지 않을 때가 있습니다.

이를 숨기기 위한 브라우저 호환성은 수년에 걸쳐 많이 발전했지만 지금은 최소한 2개의 CSS 선언이 필요합니다( thanks StackOverflow ).

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

이를 통해 이제 오버플로우 컨테이너에서 .scrollbar-hide 클래스를 사용하여 스크롤 막대를 숨길 수 있습니다. 다음은 Tailwind의 유틸리티 클래스를 사용하는 예입니다.

<div class="flex whitespace-nowrap overflow-auto scrollbar-hide">
    <!-- overflowing content -->
</div>

그러나 나처럼 순풍을 좋아하는 사람이라면 맞춤 CSS 선언을 만드는 대신 순풍 중심의 접근 방식을 원할 것입니다. 여기가 흥미로워지는 곳입니다.

이를 위한 플러그인이 있습니다

음, 실제로는 2개가 있지만 둘 다 동일한 작업을 수행합니다.

https://github.com/reslear/tailwind-scrollbar-hide

https://github.com/redwebcreation/tailwindcss-no-scrollbar

나는 더 나은 문서와 예제가 있기 때문에 첫 번째 것을 더 좋아하지만 원하는 것을 선택할 수 있습니다.

이전 예제와 플러그인 #1을 사용하여 작동하는 방법은 다음과 같습니다.

플러그인 설치

터미널에서

npm install tailwind-scrollbar-hide
# or 
yarn add tailwind-scrollbar-hide

그런 다음 tailwind.config.js 에서 plugins 어레이에 패키지를 추가합니다.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwind-scrollbar-hide')
    // ...
  ]
}

이제 사용자 지정 CSS를 작성하지 않고도 scrollbar-hide 클래스를 사용할 수 있습니다 😄.

충분히 쉬운 것 같죠?

하나의 캐치가 있습니다

이 CSS 솔루션은 최적이지만 WebKit 기반 브라우저(Chrome, Safari 및 Opera)에서는 클래스를 재정의할 수 없고 제거만 할 수 있다는 큰 문제가 있습니다. 설명하겠습니다.

원래 예제를 사용하여 다음과 같이 더 큰 중단점에 스크롤바를 표시하고 싶다고 가정해 보겠습니다.

<div class="flex whitespace-nowrap overflow-auto scrollbar-hide md:scrollbar-default">
    <!-- overflowing content -->
</div>

⭐ scrollbar-hide 및 scrollbar-default 클래스는 플러그인에서 제공되며 이러한 클래스는 Tailwind 자체에 존재하지 않습니다.

이것은 Chrome 및 Safari에서 작동하지 않으며 플러그인의 결함이 아니라 WebKit 브라우저에서 스크롤바가 작동하는 방식입니다. 주로 다음과 같습니다.

::-webkit-scrollbar cannot be simply overridden to get the default style, the only way to do it is to remove all ::-webkit-scrollbar rules from the code. 

이것은 플러그인 작성자의 문제documented이며 중단점을 모바일 우선이 아닌 데스크톱 우선으로 변경하거나 Javascript로 클래스를 제거하는 것이 좋습니다.

tailwind 구성에서 첫 번째 권장 사항을 수행하는 방법은 다음과 같습니다.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      md: { max: '767px' },
    },
  },
  plugins: [require('tailwind-scrollbar-hide')],
}

이제 저는 이것이 작업을 수행한다는 것을 알고 있지만 매우 일반적인 중단점의 동작을 변경하고 있고 아마도 소수의 위치에서만 해당 클래스를 사용하고 있기 때문에 약간 과도하다고 생각합니다.

몇 가지 조사를 한 후 이를 위해 새로운 임의 변형 기능을 사용할 수도 있다는 것을 알았습니다!

⭐ 이 기능을 사용하려면 Tailwind CSS의 3.1 버전 이상을 사용해야 합니다.

원래 예제로 돌아가서 다음과 같이 임의의 변형을 사용하여 수정할 수 있습니다.

<div class="flex whitespace-nowrap overflow-auto 
    [@media(max-width:767px)]:scrollbar-hide"> <!-- I put it on its own line to make it clearer -->
    <!-- overflowing content -->
</div>

데모를 보려면 여기Tailwind Play link를 확인하십시오. 임의 변형에 대해 자세히 알아보려면 this을 확인하십시오.


이게 다야! Tailwind CSS를 사용하여 스크롤 막대를 숨기는 방법과 사용 사례에 따라 임의의 변형을 사용하여 보다 강력한 솔루션을 만드는 방법을 배웠기를 바랍니다.