(CSS) scroll bar 제거

스크롤은 동작하지만 스크롤바를 숨기고 싶을 때가 있다.

* {
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

특정 엘리먼트의 스크롤바를 숨기고 싶다면 body 대신 클래스명을 입력하면 된다.

.no-scrollbar {
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

추가로 tailwind의 클래스로 적용하고 싶다면?

tailwind.config.js

plugins: [
  ({ addUtilities }) => {
    addUtilities({
      '.no-scrollbar': {
        /* IE, Edge */
        '-ms-overflow-style': 'none',
        /* Firefox */
        'scrollbar-width': 'none',
        /* Chrome, Safari, Opera*/
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      },
    }, ['responsive'])
  },
],