Как создать прокручиваемый элемент в 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