如何在没有滚动条的 Tailwind 中创建可滚动元素

Posted 2023-03-07

【中文标题】如何在没有滚动条的 Tailwind 中创建可滚动元素

【英文标题】：How to create scrollable element in Tailwind without a scrollbar

【发布时间】：2021-05-30 15:38:59

【问题描述】：

我正在尝试在底部重新创建一个水平滚动导航栏 没有滚动条，就像这个例子一样（减小屏幕的宽度以便能够滚动）

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>

【参考方案1】：

要隐藏滚动条，您需要直接设置样式：

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

【讨论】：

成功了！ Bootstrap 隐藏滚动条有不同的方式吗？我深入研究了上面发布的 Bootstrap 示例，但找不到执行 -webkit-scrollbar 或 -ms-overflow-style 或 scrollbar-width 的 css 代码

有趣的是，在引导示例中，它只是通过在隐藏滚动条的外部 div 上定义的高度来实现的！我花了几分钟才到那里。

嗨，我想试试这个答案，但是如何将no-scrollbar::-webkit-scrollbar 添加到插件::-webkit-scrollbar 这行让我很困惑。您能否编写一个示例以将 -webkit-scrollbar 添加到tailwind.config.js，这对我很有帮助。

::-webkit-scrollbar 只是一个特定于 webkit 的选择器，用于定位 Chrome、Safari、Edge 和 Opera 中的滚动条样式。这里可以使用的类是.no-scrollbar。 caniuse.com/?search=%3A%3A-webkit-scrollbar。至于在 TailwindCss 中添加实用程序，我会在这里使用该方法：play.tailwindcss.com/zQftpiBCmf

【参考方案2】：

/*
    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，就像您通常喜欢的那样，注意我添加了 overflow-y-auto 以使滚动条也自动保持正确的大小。

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

或者：

你可以试试这个tailwindcss 隐藏滚动条的插件

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

【讨论】：

从这个答案我无法推断我应该把这个类定义放在哪个文件中

非常感谢，兄弟

不客气 ;D

我喜欢使用这种方法，并注意如果我们为顺风类使用前缀，则该层不需要前缀。请CMIIW :)

【参考方案3】：

要在 cmets 中回答 @wataru 的问题，将这些类作为插件添加到 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'
          
        
      
      )
    )
  ],

要检查的行是 const plugin 和 plugins: [] 数组

我通过检查上面@jasonleonhard 链接的https://github.com/reslear/tailwind-scrollbar-hide 包的源代码了解到这一点。