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

Я пытаюсь воссоздать горизонтальную навигационную 9X_twitter-bootstrap-4-beta панель прокрутки с попутным ветром без полосы прокрутки внизу, как 9X_bootstrap-4.1.x в этом примере (уменьшите ширину экрана, чтобы 9X_bootstrap-5 иметь возможность прокручивать)

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

Я попробовал 9X_bootstrap-4.1.x следующее, используя Tailwind, но не смог 9X_twitter-bootstrap-4 понять, как удалить горизонтальную полосу 9X_css-layout прокрутки, которая выглядит как пример начальной 9X_bootstrap-4.1.x загрузки выше. Может кто-нибудь помочь?

 

22
0
3
Общее количество ответов: 3

Ответ #1

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

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

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

Вы можете легко 9X_css-layout добавить их как утилиты Tailwind, используя 9X_bootstrap-4 плагин в вашей конфигурации: 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

42
2

  • Интересно, что в примере начальной загрузки это просто достигается с определенной высотой внешнего div, скрывающего полосу прокрутки! Мне потребовалось несколько минут, чтобы ...

Ответ #2

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

/* https://github.com/tailwindlabs/tailwindcss/discussions/2394 https://github.com/tailwindlabs/tailwindcss/pull/5732 */ @layer utilities { /* Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } } 
Затем вы просто добавляете классno-scrollbar как вы 9X_twitter-bootstrap-4 обычно этого хотите, обратите внимание, я 9X_inline-block добавил overflow-y-auto, чтобы автоматически 9X_twitter-bootstrap-4-beta поддерживать правильный размер полосы прокрутки.

                

АЛЬТЕРНАТИВНО:

Вы 9X_twitter-bootstrap-4-beta можете попробовать этоtailwindcss плагин для скрытия 9X_max-width полосы прокрутки

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


                
33

                
                

                
0



            

Ответ #3

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

Чтобы ответить на вопрос @wataru в комментариях, синтаксис для добавления этих классов в качестве плагина к 9X_bootstrap-4.1.x tailwind.congig.js таков:

const plugin = require('tailwindcss/plugin') module.exports = { content: [ "./pages/**/*.{js,ts,jsx}", "./components/**/*.{js,ts,jsx}", ], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { addUtilities({ '.scrollbar-hide': { /* IE and Edge */ '-ms-overflow-style': 'none', /* Firefox */ 'scrollbar-width': 'none', /* Safari and Chrome */ '&::-webkit-scrollbar': { display: 'none' } } } ) }) ], } 

Строки для проверки — это массив 9X_css-layout const plugin и plugins: []

Я узнал об этом, изучив исходный код 9X_twitter-bootstrap-4-beta пакета https://github.com/reslear/tailwind-scrollbar-hide, ссылка на который была указана 9X_bootstrap-5 @jasonleonhard выше.

12
0