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

参考

相关推荐
前端小趴菜0518 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts