css scrollbar样式设置

张春雷发布于2019-08-29 14:13 / 2856人阅读

摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。

一前言

在CSS 中，如果我们在块级容器上设置了属性:

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。
有时候我们需要自定义滚动条的样式，比如一开始就它显示，比如想改变滚动条的颜色，设置轨道的样式等，那么这篇文章就是为你准备的。

二正文

1.认识滚动条

设置scrollbar的为CSS伪元素，对应上图的数字：

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

属性介绍：

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

2.设置样式

demo
进入页面，打开控制台工具，选中其中一个样式，就能看到该样式的CSS源码。

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。

:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个多带带的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

用法举例：

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn"t in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it"s being hovered by the mouse */
}

3.IE浏览器
兼容IE的参考链接：https://www.cnblogs.com/koley...

三后记

Chrome能很好的支持自定义滚动条，其它的浏览器在不同程度上支持自定义滚动条样式。
参考文章：http://blog.csdn.net/cysear/a...

云服务器 GPU云服务器 js设置css样式 css样式页面css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113000.html

css scrollbar样式设置

摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。一前言在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...

104828720 2019-08-01 18:23 评论0 收藏0
CSS进阶篇--设置滚动条样式

摘要：用于所有滚动条轨道，指示滚动条圆角是否显示。用于所有的滚动条轨道，指示应用滚动条的某个页面容器元素是否当前被激活。因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示： showImg(https://segmentfault.com/img...

elva 2019-08-28 18:15 评论0 收藏0
浏览器滚动条 --- 自定义“衣裳”

摘要：由于种种原因，浏览器的默认滚动条衣裳实在是，为了美，本人结合万维网各大神给的经验和自己的实践，做了此篇总结。标识对象是否放到滑块的后面。该伪类可以用于按钮和内层轨道。用于所有滚动条轨道，指示滚动条圆角是否显示。由于种种原因，浏览器的默认滚动条衣裳实在是 (ˉ▽￣～)~~，为了美，本人结合万维网各大神给的经验和自己的实践，做了此篇总结。若有错误，请在评论里给出，我会及时更改。我在电脑上打开了...

mtunique 2019-04-23 13:44 评论0 收藏0
如何自定义CSS滚动条的样式？

摘要：需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和I...

linkFly 2019-08-02 12:07 评论0 收藏0
如何自定义CSS滚动条的样式？

摘要：可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。 0.需求...

kviccn 2019-04-23 13:09 评论0 收藏0