web-dev-qa-db-fra.com

Comment créer un élément défilable dans le vent arrière sans barre de défilement

J'essaie de recréer une barre Naville de défilement horizontale avec tailwind sans une barre de défilement sur le bas comme cet exemple (réduire la largeur de votre écran pour pouvoir faire défiler)

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

J'ai essayé ce qui suit à l'aide de talaud-houle mais je n'ai pas pu comprendre comment retirer la barre de défilement horizontale qui apparaît comme le bootstrap exemple ci-dessus. Quelqu'un pourrait-il aider?

<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>
cssbootstrap-4tailwind-cssbootstrap-5
4
vince
/*
    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 */
    }
}

Ensuite, vous devez simplement ajouter la classe no-scrollbar Comme vous le souhaitez généralement, remarquez que j'ai ajouté Overflow-y-Auto pour garder la barre de défilement automatiquement la taille correcte.

<div className="no-scrollbar overflow-y-auto">

Alternativement:

Vous pouvez essayer ceci tailwindcss plugin pour masquer la barre de défilement

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

1
jasonleonhard