WHAT - 滚动条 css scrollbar-* 属性

目录

学习 CSS 的 scrollbar-* 属性可以帮助你直接通过原生样式自定义浏览器的滚动条外观,无需依赖第三方库。以下是详细的属性说明和示例:

1. 基础属性

scrollbar-width

  • 作用: 设置滚动条的宽度。

  • : auto(默认)、thin(细滚动条)、none(隐藏滚动条)。

  • 示例 :

    css 复制代码
    /* 隐藏滚动条但保留滚动功能 */
    .container {
      scrollbar-width: none;
    }
    
    /* 显示细滚动条 */
    .container {
      scrollbar-width: thin;
    }

scrollbar-color

  • 作用: 设置滚动条滑块(thumb)和轨道(track)的颜色。

  • : rgb() | rgba() | hex | hsl() | keyword

  • 示例 :

    css 复制代码
    .container {
      scrollbar-color: #d3d3d3 #f5f5f5; /* 滑块颜色  轨道颜色 */
    }

2. WebKit 浏览器专用属性(Chrome/Safari)

WebKit 使用伪元素 ::-webkit-scrollbar 来定制滚动条样式:

结构说明

css 复制代码
/* 整个滚动条容器 */
::-webkit-scrollbar {
  width: 8px;         /* 横向滚动条宽度,纵向滚动条高度 */
  height: 12px;        /* 纵向滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 6px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 6px;
  transition: background 0.2s ease;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

完整示例

css 复制代码
/* 针对纵向滚动条 */
.container {
  overflow-y: auto;
  height: 300px;
}

/* WebKit 自定义滚动条 */
.container::-webkit-scrollbar {
  width: 8px;
}

.container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 6px;
}

.container::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 6px;
}

.container::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

3. 跨浏览器兼容方案

由于不同浏览器对 scrollbar-* 属性的支持不一致,建议结合以下方法:

统一写法(现代浏览器)

css 复制代码
/* 隐藏滚动条但保留滚动功能 */
.hide-scrollbar {
  scrollbar-width: none;  /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  overflow: -moz-scrollbars-none; /* Firefox */
}

/* WebKit 浏览器隐藏滚动条 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

4. 高级技巧

自定义滚动条形状

通过 border-radius 实现圆形滚动条:

css 复制代码
::-webkit-scrollbar-thumb {
  border-radius: 50%; /* 圆形滑块 */
}

滚动条动画

为滑块添加过渡效果:

css 复制代码
::-webkit-scrollbar-thumb {
  transition: background 0.3s ease;
}

为特定元素单独设置

只针对某个容器生效:

css 复制代码
#my-list {
  overflow-y: auto;
  /* 自定义滚动条样式... */
}

5. 实现 macOS 风格滚动条

结合上述属性,模拟 macOS 的细长滚动条和悬停效果:

css 复制代码
/* 容器样式 */
.macos-scrollbar {
  overflow-y: auto;
  height: 400px;
}

/* WebKit 自定义 */
.macos-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.macos-scrollbar::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 6px;
}

.macos-scrollbar::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.macos-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Firefox 兼容 */
.macos-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d3d3d3 #f5f5f5;
}

HOW - 在Windows浏览器中模拟MacOS的滚动条 中我们也介绍过。

6. 注意事项

  1. 浏览器兼容性:

    • 注意浏览器是否支持 scrollbar-widthscrollbar-color
    • Chrome/Safari 可通过 ::-webkit-scrollbar 伪元素。
    • Edge/IE 不推荐使用原生滚动条样式,建议通过第三方库统一处理。
  2. 隐藏滚动条:

    • 使用 overflow: hidden 会禁用滚动,需谨慎!

通过以上方法,你可以完全掌控滚动条的外观和行为,适配现代浏览器的需求。假如希望引入一些第三方库来实现,可以阅读 HOW - 在Windows浏览器中模拟MacOS的滚动条

相关推荐
知识分享小能手8 分钟前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
PineappleCoder3 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
EveryPossible4 小时前
展示内容框
前端·javascript·css
伊织code4 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰4 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪4 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo4 小时前
不写一行JS!纯CSS如何读取HTML属性实现Tooltip
前端
gnip5 小时前
脚本加载失败重试机制
前端·javascript
遗憾随她而去.5 小时前
Uni-App 页面跳转监控实战:快速定位路由问题
前端·网络·uni-app
码农学院5 小时前
MSSQL字段去掉excel复制过来的换行符
前端·数据库·sqlserver