Как создать прокручиваемый элемент в Tailwind без полосы прокрутки

Я пытаюсь воссоздать панель навигации с горизонтальной прокруткой с попутным ветром без полосы прокрутки внизу, как в этом примере (уменьшите ширину экрана, чтобы иметь возможность прокрутки)

https://getbootstrap.com/docs/5.0/examples/blog/

Я попробовал следующее, используя Tailwind, но не смог понять, как удалить горизонтальную полосу прокрутки, которая выглядит как пример начальной загрузки выше. Может ли кто-нибудь помочь?

<ul class="flex overflow-x-auto whitespace-nowrap p-4">
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
</ul>

css tailwind-css bootstrap-4 bootstrap-5
person vince    schedule 01.03.2021    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Чтобы скрыть полосу прокрутки, вам нужно напрямую ее стилизовать:

/* 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 */
}

Вы можете легко добавить их как утилиты Tailwind, используя плагин в вашей конфигурации: https://tailwindcss.com/docs/plugins#adding-utilities

Дополнительная литература:

https://css-tricks.com/almanac/properties/s/scrollbar/ https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

person Steve O    schedule 02.03.2021
comment
Это сработало! Есть ли другой способ, которым Bootstrap скрывает полосы прокрутки? Я копался в примере Bootstrap, который я разместил выше, и я не могу найти код css, который делает -webkit-scrollbar или -ms-overflow-style или ширину полосы прокрутки - person vince; 02.03.2021
comment
Так что интересно, в примере с начальной загрузкой это достигается с определенной высотой внешнего div, который скрывает полосу прокрутки! Мне понадобилось несколько минут, чтобы добраться туда. - person Steve O; 03.03.2021
comment
Привет, я хочу попробовать этот ответ, но как добавить no-scrollbar::-webkit-scrollbar в плагины ::-webkit-scrollbar эта строка меня смущает. Не могли бы вы написать пример добавления -webkit-scrollbar в tailwind.config.js, который был бы мне очень полезен. - person wataru; 28.04.2021
comment
::-webkit-scrollbar — это просто специальный селектор webkit, используемый для выбора стиля полосы прокрутки в Chrome, Safari, Edge и Opera. Здесь можно использовать класс .no-scrollbar. caniuse.com/?search=%3A%3A-webkit-scrollbar. Что касается добавления утилиты в TailwindCss, я бы использовал подход здесь: play.tailwindcss.com/zQftpiBCmf - person Steve O; 28.04.2021