你好👋,

大多数时候,要制作一个好的用户界面(UI),你必须

牺牲一些元素,在某些方面,scrollbar。

在本文中,我们将通过步骤来使用 Tailwind css 在我们的 React 应用程序中实现满意的滚动体验。

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

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

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

进入全屏模式 退出全屏模式

从那里让我们在下面添加几个代码@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 应用程序中隐藏滚动条了。

我希望你觉得这篇文章有用且有趣。

请随时通过Twitter与我联系