tailwind를 활용한 firefox에서 scrollbar 없애기

 

내 프로젝트를 크롬에서 주로 확인하다가 firefox에서도 잘 동작하는지 확인해보려 켜보았다.

첫 메인 페이지부터 내가 예상하지 못한 사항이 있네..?ㅋㅋㅋ

그거슨 바로 firefox에서 scrollbar가 보여진다는 사항이였다..

---

 

우선 많은 글들을 확인해보니 대부분의 글들에서는 plugin을 설치하라는 방법을 많이 제시하였다

 

물론 plugin도 좋은 사항이지만,,,

 

설치보다는 직접 구현하는게 낫겠다라는 생각에 더 많은 구글링을 하였고 찾은 결과는 아래와 같다.

 

 

1.  global.css에 코드 추가하기

@tailwind base;
@tailwind components;
@tailwind utilities;

// add the code bellow
@layer utilities {
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }
     /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
    }
  }
...

 

 

2.  사용하는 부분에서 작성하기

 

<div className="no-scrollbar"></div>

 

 

요렇게 하면 크로스브라우징 이슈 해결!

 

 

 

참고

https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd

How to hide scrollbar on your element in Tailwind