Как скрыть полосу прокрутки с помощью Tailwind CSS

Этот пост был первоначально опубликован на Red Pixel Themes.

Полосы прокрутки — это визуальные индикаторы, к которым мы все привыкли при просмотре веб-страниц, но для нас, разработчиков, иногда мы просто не хотим их показывать.

Совместимость браузеров для их скрытия сильно изменилась за прошедшие годы, но сейчас для этого нужно как минимум 2 CSS объявления (спасибо 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>

Но если вы, как и я, любите tailwind, то вместо создания пользовательского CSS объявления вы, вероятно, захотите использовать более ориентированный на tailwind подход. Вот тут-то и становится интересно.

Для этого есть плагин

На самом деле их два, но оба делают одно и то же:

1. https://github.com/reslear/tailwind-scrollbar-hide
2. 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')
    // ...
  ]
}

Теперь вы можете использовать класс scrollbar-hide, без написания каких-либо собственных CSS 😄.

Звучит достаточно просто, верно?

Но есть одна загвоздка

Это 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. 

Эта проблема задокументирована автором плагина, и его рекомендация заключается в том, чтобы изменить точку останова на desktop-first вместо mobile-first или удалить класс с помощью 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. И посмотрите здесь, чтобы узнать больше о произвольных вариантах.

Вот и все на этом! Надеюсь, вы узнали, как скрыть полосы прокрутки с помощью Tailwind CSS и как произвольные варианты могут помочь вам создать более надежное решение в зависимости от вашего случая использования.