你好👋, 大多数时候,要制作一个好的用户界面(UI),你必须 牺牲一些元素,在某些方面,scrollbar。 在本文中,我们将通过步骤来使用 Tailwind css 在我们的 React 应用程序中实现满意的滚动体验。

此时,我们假设您已经在 React 应用程序中设置了 tailwind 并准备好使用。

首先我们需要转到我们的index.css文件:

//global index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

从那里让我们在下面添加几个代码

@layer utilities {
    @variants responsive {
      /* 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 */
      }
    }
  }

此时我们添加了::-webkit-scrollbar来定位Chrome、Safari、Edge和Opera中的滚动条样式。 no-scrollbar是我们将用于隐藏滚动条的类。

示例

在您的全局index.css中添加上述代码后 假设您的代码在_before_ 之前是这样的:

<div className="w-full h-42 overflow-y-scroll">...</div>

隐藏滚动条在代码中添加no-scrollbar 现在您的代码应如下所示:

<div className="w-full h-42 overflow-y-scroll no-scrollbar">...</div>

🎉恭喜,现在您知道如何使用 Tailwind CSS 在 React 应用程序中隐藏滚动条了。

在 Tailwind CSS 中，你可以使用 scrolling 插件来隐藏元素上的滚动条。首先，你需要在你的项目中启用这个插件。

在你的 tailwind.config.js 文件中，将 scrolling 插件添加到 plugins 数组中：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/scrollbar'),
    // ...
  ],
}

然后，重启你的开发服务器以应用更改。

要隐藏滚动条，你可以使用 scrollbar-hidden 类。例如：

<div class="scrollbar-hidden overflow-y-auto h-64">
  <!-- Your content here -->
</div>

这将隐藏垂直滚动条。如果你想要隐藏水平滚动条，可以使用 scrollbar-hidden-x 类。如果你想同时隐藏两个方向的滚动条，可以同时使用这两个类：scrollbar-hidden scrollbar-hidden-x。