使用 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>

参考

相关推荐
黑客老李1 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录2 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia3 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽4 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥5 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02349 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder15 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder15 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep22 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛27 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm