使用 tailwindcss 隐藏滚动条

关注公众号:前端成长指南,查看更多文章

滚动条是浏览器的默认行为,在移动端会自动隐藏滚动条,然而 PC 上会显示默认滚动条。

如果是在 PC 页面中还是可以接受的,但是在弹框中显示一个宽宽的滚动条,就破坏了设计的美感。

当然,肯定还是要保证内容能够滚动,这里只是需要隐藏滚动条。除了隐藏滚动条,还可以对滚动条进行样式设置,这里就不介绍了。

使用 CSS

css 复制代码
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

其中需要针对 Chrome、IE、Edge、Firefox 进行兼容,它们涉及的属性并不一样,webkit 内核是通过伪元素 -webkit-scrollbar 进行设置,IE 是 -ms-overflow-style,Firefox 是 scrollbar-width。

如果使用 tailwindcss,可以:

使用 utility class(推荐)

可以使用官网的 Adding custom utilities 增加自定义 utilities,写在 @tailwind 的全局文件中:

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Chrome, Safari and Opera */
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hidden {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
}

在页面中的使用:

html 复制代码
<div class="scrollbar-hidden">
  <!-- ... -->
</div>

注意 tailwindcss v4.0 已经更改了写法,直接使用 @utilities指令,具体可以参考文档。

使用 tailwind plugin

在 tailwind.config.js 中进行配置:

js 复制代码
/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin")

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        /* Chrome, Safari and Opera */
        ".scrollbar-hidden::-webkit-scrollbar": {
          display: "none",
        },

        ".scrollbar-hidden": {
          "scrollbar-width": "none" /* Firefox */,
          "-ms-overflow-style": "none" /* IE and Edge */,
        },
      })
    }),
  ],
}

在页面中的使用:

html 复制代码
<div class="scrollbar-hidden">
  <!-- ... -->
</div>

使用 arbitrary values

直接在 HTML class 中定义:

html 复制代码
<div class="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
  <!-- ... -->
</div>

这种方式适合一次性的使用。

注意 tailwindcss 的变体(Arbitrary) 除了 Arbitrary values 还有 Arbitrary properties、Arbitrary variants。[-ms-overflow-style:none] [scrollbar-width:none] 这种用法是 Arbitrary properties,[&::-webkit-scrollbar]:hidden 这种用法是 Arbitrary variants, 表示获取当前元素伪元素 -webkit-scrollbar,当做变体条件,应用 class hidden。

使用 tailwind-scrollbar-hide

安装依赖,配置:

js 复制代码
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwind-scrollbar-hide')
    // ...
  ]
}

使用:

html 复制代码
<div class="scrollbar-hidden">
  <!-- ... -->
</div>

参考

相关推荐
10年前端老司机38 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js