自定义 scrollbar 滚动条样式

2019-11-13 admin

纯 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

参考资料:

[转载]原文链接:https://segmentfault.com/a/1190000020991323

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79137.html

文章标题:自定义 scrollbar 滚动条样式

相关文章
element ui table render-header自定义表头信息使用
公司最近有需求实现表格列标题添加说明的需求,效果如图: 即用户将鼠标放在表头问号图标时显示他的说明信息。 页面代码部分: &lt;el-table-column prop=&#x27;timeSlice&#x27; :render-he...
2018-08-08
文字垂直滚动之javascript代码
在大型的网站新闻公告和友情链接等领域经常有这种文字或图片垂直滚动的效果,下面就介绍一下文字垂直滚动的javascript代码。 javascript代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...
2017-03-27
javaScript实现滚动新闻的方法
本文实例讲述了javaScript实现滚动新闻的方法。分享给大家供大家参考。具体如下: rolling_new.html页面如下: &lt;!DOCTYPE HTML PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&...
2017-03-27
vue实现鼠标右键点击自定义菜单
1. 自定义菜单 最近的后台管理项目中使用到了右侧标签栏方便用户切换不同模块。但当标签栏过多时一个个关闭明显示是反人类的,所以参考了element admin后写了一个自定义指令来实现点击鼠标右键实现自定义菜单。 最终效果图: 2 结...
2018-12-13
javascript清理table样式
项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table、tr、td中携带的样式清除掉,同时还不能...
2017-03-27
原生js实现模拟滚动条
当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观。 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了。不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是...
2017-03-24
bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 &lt;div class=&quot;modal fade&quot; da...
2017-03-13
webpack 换肤功能多主题/配色样式打包解决方案
色阶 本文主要详细介绍了,如何使用 webpack,打包多套不同主题的解决方案以及实践中所遇到的问题。 &lt;a id=“more”&gt;&lt;/a&gt; 起因 首先,简单的介绍一下什么是多主题,所谓多套主题/配色,就是我们很常见...
2018-04-23
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题
最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬) 我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里就不细说了 有大神总结 ,或者自行百度。 ...
2018-04-25
超级简单实现JavaScript MVC 样式框架
介绍 使用过JavaScript框架(如AngularJS, Backbone 或者Ember)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理。这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加轻松,而模型-视图-控...
2017-03-21
回到顶部