自定义 scrollbar 滚动条样式

纯 CSS 实现

支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)
  • ::-webkit-scrollbar— 整个滚动条.
  • ::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb— 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track— 滚动条轨道.
  • ::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

具体例子:codepen custom scrollbar

Firefox
  • scrollbar-color- 设置滚动条轨道和拇指的颜色
  • scrollbar-width- 设置滚动条出现时的厚度
/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> values
第一种颜色应用于滚动条拇指,第二种颜色应用于滚动条轨道
*/
scrollbar-color: rebeccapurple green;

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

JS实现(跨浏览器支持)

使用JS库,例如:simplebar。 另外,Das Surma 提供了一种 custom scrollbar( CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar),使用 CSS矩阵 构建滚动条,JS 不用来实现滚动功能(有助于性能),而是用于设置 CSS。

例子:Custom Scrollbar Example from Google Chrome Labs

参考资料:

原文链接:segmentfault.com

上一篇:JavaScript中DOM操作
下一篇:前端数据结构之集合

相关推荐

  • 面板拖拽之vue自定义指令

    前言 在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或re...

    1 年前
  • 隐藏火狐和谷歌浏览器滚动条

    有时候想要实现滚动条隐藏,但是还是可以滚动内容的效果 怎么实现呢? 谷歌浏览器webkit 火狐浏览器 ...

    1 年前
  • 钉钉小程序 之 自定义组件的使用,以及父组件与子组件(自定义组件)传值

    目录: 本机环境 自定义组件(子组件) 页面中引入(父组件引入子组件) 父组件(使用自定义组件的页面)传值给子组件 子组件(自定义组件)传值给父组件 备注 一、本机环境 二、自定义组件(子...

    2 个月前
  • 采用shell自定义脚本,控制集成部署环境更加方便灵活

    Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变得可能。现在软件开发追求的是效率以及质量,Jenkins使得自动化成为可能! 亮点 采用shell自定义脚本,控...

    1 年前
  • 遮遮掩掩的滚动条 -&gt; el-scrollbar

    elscrollbar 是啥? ElementUI,作为一套非常出名 Vue 的 UI 组件库,玩 Vue 人几乎都认识它。最近在翻看 Element 的源码时,发现了一个有趣的现象,怎么 autoc...

    23 天前
  • 逻辑强化系列(一):彻底搞懂自定义组件使用 v-model

    前言 阅读本文前,希望你已经彻底理解了语法糖 vmodel 以及父子组件之间的通讯方法 vmodel 在组件上使用 vmodel 之前首先要知道,vmodel 的用处以及实际操作流程,以方便理解,而不...

    1 个月前
  • 通过字符串var [复制]获得自定义对象属性

    CommunityJayNicolas Hackleman(https://stackoverflow.com/users/1/community)提出了一个问题:Getting a Custom O...

    2 年前
  • 通过nodejs实现自定义命令

    我们开发用到的一些库都有自己特有的命令,如webpack,babel和jest等。通过给这些命令输入不同的参数,可以得到相应的功能。通过篇文章,你将学会如何一步步地编写运行在弄的环境的自定义命令。

    3 年前
  • 通过JavaScript的自定义富文本实现短信模板功能

    前言 公司最近有一个发送短信模板的功能实现需求。在网上找到一篇范文,发现并不适合我们的项目,引用了40%的内容,20%的代码,改成了自己的一个封装函数。 此demo在于实现自定义的短信模板,比如有...

    8 个月前
  • 踩坑页面蒙层导致的双滚动条

    习惯性记录日常工作所遇坑点,不仅仅是经验分享,真心希望走过路过的大神留言赐教! 场景如述:蒙层下一可滚动加载的 List,蒙层上一可滚动加载的 List。 (https://img.javascr...

    2 年前

官方社区

扫码加入 JavaScript 社区