webkit内核浏览器DIV滚动条样式修改和设置

引言：

　　最近在做自己的小项目，为了设计出好看的页面费劲了心思，大到页面的整体布局，小到DIV的滚动条都不放过，以下是我通过查阅资料总结的webkit内核浏览器滚动条样式的修改方法。

原理：

　　webkit浏览器css设置滚动条主要有下面7个属性

1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

2. ::-webkit-scrollbar-button 滚动条两端的按钮

3. ::-webkit-scrollbar-track  外层轨道

4. ::-webkit-scrollbar-track-piece  内层滚动槽

5. ::-webkit-scrollbar-thumb 滚动的滑块

6. ::-webkit-scrollbar-corner 边角

7 .::-webkit-resizer 定义右下角拖动块的样式

　　具体所指如图例

　　下面是滚动条的主要几个设置属性

:horizontal 水平方向的滚动条

:vertical 垂直 方向的滚动条

:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end 类似于start伪类，标识对象是否放到滑块的后面。

:double-button  该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present  用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

　　　

　　写个实例demo，CSS很简单。

/* 设置滚动条的样式 */

::-webkit-scrollbar {

   width: 12px;

}

/* 滚动槽 */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    border-radius: 10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: rgba(0,0,0,0.1);

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

  background: rgba(255,0,0,0.4);

}

　　

IE滚动条样式设置

　　IE下面就比较简单那了，自定义的项目比较少，全是颜色。

1. scrollbar-arrow-color: color; /*三角箭头的颜色*/

2. scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/

3. scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/

4. scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/

5. scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/

6. scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/

7. scrollbar-track-color: color; /*立体滚动条背景颜色*/

8. scrollbar-base-color:color; /*滚动条的基色*/

实践

实现效果展示：

　　以下是我在chrome上实现的几个滚动条效果

HTML:

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <title>webkit滚动条样式</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div id="wrapper">

        <div class="scrollbar" id="style-default">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-1">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-2">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-3">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-4">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-5">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-6">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-7">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-8">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-9">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-10">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-11">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-13">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-14">

          <div class="force-overflow"></div>

        </div>

        <div class="scrollbar" id="style-15">

          <div class="force-overflow"></div>

        </div>

    </div>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

　　

CSS：

body{

	background-color: #2f2f2f;

}

header

{

	font-family: 'Lobster', cursive;

	text-align: center;

	font-size: 25px;

}

#info

{

	font-size: 18px;

	color: #555;

	text-align: center;

	margin-bottom: 25px;

}

a{

	color: #074E8C;

}

.scrollbar

{

	margin-left: 20px;

	float: left;

	height: 300px;

	width: 100px;

	background: #fff;

	overflow-y: scroll;

	margin-bottom: 30px;

}

.force-overflow

{

	min-height: 450px;

}

#wrapper

{

	text-align: center;

	width: 80%;

	margin: 20px auto;

}

/*

 *  STYLE 1

 */

#style-1::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	border-radius: 10px;

	background-color: #F5F5F5;

}

#style-1::-webkit-scrollbar

{

	width: 12px;

	background-color: #F5F5F5;

}

#style-1::-webkit-scrollbar-thumb

{

	border-radius: 20px;

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

	background-color: #555;

}

/*

 *  STYLE 2

 */

#style-2::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	border-radius: 10px;

	background-color: #F5F5F5;

}

#style-2::-webkit-scrollbar

{

	width: 12px;

	background-color: #F5F5F5;

}

#style-2::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

	background-color: #D62929;

}

/*

 *  STYLE 3

 */

#style-3::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

}

#style-3::-webkit-scrollbar

{

	width: 6px;

	background-color: #F5F5F5;

}

#style-3::-webkit-scrollbar-thumb

{

	background-color: #000000;

}

/*

 *  STYLE 4

 */

#style-4::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

}

#style-4::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-4::-webkit-scrollbar-thumb

{

	background-color: #000000;

	border: 2px solid #555555;

}

/*

 *  STYLE 5

 */

#style-5::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

}

#style-5::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-5::-webkit-scrollbar-thumb

{

	background-color: #0ae;

	background-image: -webkit-gradient(linear, 0 0, 0 100%,

	                   color-stop(.5, rgba(255, 255, 255, .2)),

					   color-stop(.5, transparent), to(transparent));

}

/*

 *  STYLE 6

 */

#style-6::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

}

#style-6::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-6::-webkit-scrollbar-thumb

{

	background-color: #F90;

	background-image: -webkit-linear-gradient(45deg,

	                                          rgba(255, 255, 255, .2) 25%,

											  transparent 25%,

											  transparent 50%,

											  rgba(255, 255, 255, .2) 50%,

											  rgba(255, 255, 255, .2) 75%,

											  transparent 75%,

											  transparent)

}

/*

 *  STYLE 7

 */

#style-7::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

	border-radius: 10px;

}

#style-7::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-7::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	background-image: -webkit-gradient(linear,

									   left bottom,

									   left top,

									   color-stop(0.44, rgb(122,153,217)),

									   color-stop(0.72, rgb(73,125,189)),

									   color-stop(0.86, rgb(28,58,148)));

}

/*

 *  STYLE 8

 */

#style-8::-webkit-scrollbar-track

{

	border: 1px solid black;

	background-color: #F5F5F5;

}

#style-8::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-8::-webkit-scrollbar-thumb

{

	background-color: #000000;

}

/*

 *  STYLE 9

 */

#style-9::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

}

#style-9::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-9::-webkit-scrollbar-thumb

{

	background-color: #F90;

	background-image: -webkit-linear-gradient(90deg,

	                                          rgba(255, 255, 255, .2) 25%,

											  transparent 25%,

											  transparent 50%,

											  rgba(255, 255, 255, .2) 50%,

											  rgba(255, 255, 255, .2) 75%,

											  transparent 75%,

											  transparent)

}

/*

 *  STYLE 10

 */

#style-10::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

	border-radius: 10px;

}

#style-10::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-10::-webkit-scrollbar-thumb

{

	background-color: #AAA;

	border-radius: 10px;

	background-image: -webkit-linear-gradient(90deg,

	                                          rgba(0, 0, 0, .2) 25%,

											  transparent 25%,

											  transparent 50%,

											  rgba(0, 0, 0, .2) 50%,

											  rgba(0, 0, 0, .2) 75%,

											  transparent 75%,

											  transparent)

}

/*

 *  STYLE 11

 */

#style-11::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

	border-radius: 10px;

}

#style-11::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-11::-webkit-scrollbar-thumb

{

	background-color: #3366FF;

	border-radius: 10px;

	background-image: -webkit-linear-gradient(0deg,

	                                          rgba(255, 255, 255, 0.5) 25%,

											  transparent 25%,

											  transparent 50%,

											  rgba(255, 255, 255, 0.5) 50%,

											  rgba(255, 255, 255, 0.5) 75%,

											  transparent 75%,

											  transparent)

}

/*

 *  STYLE 12

 */

#style-12::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);

	border-radius: 10px;

	background-color: #444444;

}

#style-12::-webkit-scrollbar

{

	width: 12px;

	background-color: #F5F5F5;

}

#style-12::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	background-color: #D62929;

	background-image: -webkit-linear-gradient(90deg,

											  transparent,

											  rgba(0, 0, 0, 0.4) 50%,

											  transparent,

											  transparent)

}

/*

 *  STYLE 13

 */

#style-13::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);

	border-radius: 10px;

	background-color: #CCCCCC;

}

#style-13::-webkit-scrollbar

{

	width: 12px;

	background-color: #F5F5F5;

}

#style-13::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	background-color: #D62929;

	background-image: -webkit-linear-gradient(90deg,

											  transparent,

											  rgba(0, 0, 0, 0.4) 50%,

											  transparent,

											  transparent)

}

/*

 *  STYLE 14

 */

#style-14::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);

	background-color: #CCCCCC;

}

#style-14::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-14::-webkit-scrollbar-thumb

{

	background-color: #FFF;

	background-image: -webkit-linear-gradient(90deg,

	                                          rgba(0, 0, 0, 1) 0%,

											  rgba(0, 0, 0, 1) 25%,

											  transparent 100%,

											  rgba(0, 0, 0, 1) 75%,

											  transparent)

}

/*

 *  STYLE 15

 */

#style-15::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);

	background-color: #F5F5F5;

	border-radius: 10px;

}

#style-15::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-15::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	background-color: #FFF;

	background-image: -webkit-gradient(linear,

									   40% 0%,

									   75% 84%,

									   from(#4D9C41),

									   to(#19911D),

									   color-stop(.6,#54DE5D))

}

/*

 *  STYLE 16

 */

#style-16::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);

	background-color: #F5F5F5;

	border-radius: 10px;

}

#style-16::-webkit-scrollbar

{

	width: 10px;

	background-color: #F5F5F5;

}

#style-16::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	background-color: #FFF;

	background-image: -webkit-linear-gradient(top,

											  #e4f5fc 0%,

											  #bfe8f9 50%,

											  #9fd8ef 51%,

											  #2ab0ed 100%);

}

JS：

$(document).ready(function () {

    if (!$.browser.webkit) {

        $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');

    }

});

参考资料：

欢迎点击查看原文: CSS设置滚动条样式

【前端】webkit内核浏览器DIV滚动条样式修改和设置的更多相关文章

  1. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

  2. 八大Webkit内核浏览器

    列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比.PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对其他IE内核浏览器很感兴趣<抛弃数据!用体验和感觉告 ...

  3. 浅谈关于QT中Webkit内核浏览器

    关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...

  4. C# webkit 内核浏览器 访问https 网站 提示 Problem with the SSL CA cert (path? access rights?)

    C# webkit 内核浏览器 访问https 网站 提示 Problem with the SSL CA cert (path? access rights?) 解决方法: 陈凯文11112014- ...

  5. 修改DIV滚动条样式

    /*滚动条样式*/ div::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px; } div::-w ...

  6. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  7. webkit内核浏览器的CSS写法

    -webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择 ...

  8. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  9. scroll滚动条样式修改

    一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll. 当我们需要改变这个滚动条样式的时候,我们需要做以下的修改: html: <div id="style- ...

随机推荐

  1. 【MYSQL】主从库查看及搭建

    show slave status 查看从库信息  http://blog.csdn.net/lxpbs8851/article/details/7898716 搭建主从库   http://www. ...

  2. 机器学习（4）Hoeffding Inequality--界定概率边界

    问题 假设空间的样本复杂度(sample complexity):随着问题规模的增长导致所需训练样本的增长称为sample complexity. 实际情况中,最有可能限制学习器成功的因素是训练数据的 ...

  3. 怎么把系统装进u盘（ultraiso）

    ​首先要下载一个叫ultraiso的软件.可以在百度中搜索此软件下载.下载后安装,安装后打开软件,如图所示.        ​点击左上角的文件选项,在弹出的菜单中,点击打开选项,打开一个你要装进U盘的 ...

  4. echarts3.0使用总结

    echarts的使用和例子传送门 1.安装echarts npm install echarts --save 这里配置好了,直接输入 npm install //下载插件 npm start //运 ...

  5. CI框架主题切换的功能

    CI框架主题切换的功能 本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量 如 : ...

  6. struts2增删改查---layer---iframe层

    在这里写一下struts2中的简单的增删改查 struts.xml中的配置 <?xml version="1.0" encoding="UTF-8" ?& ...

  7. 记Angular与Django REST框架的一次合作（2）：前端组件化——Angular

    注:这是这个系列的第二部分,主要集中在Angular的使用方面.之前使用过AngularJS(Angular 1.x),混在Django的模板中使用,这些页面一般完全是结果展示页.在有Django表单 ...

  8. 自定义Git之忽略特殊文件

    有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们,比如保存了数据库密码的配置文件啦,等等,每次git status都会显示Untracked files ...,有强迫症的童鞋心里肯定 ...

  9. EXT中导出表格中的数据到Excel

    { itemId: 'excel', text: '导出', iconCls: 'btnExportExcel', disabled: false, handler: function () { // ...

  10. 微信小程序（有始有终，全部代码）开发--- 新增【录音】以及UI改进

    开篇语 寒假发了一篇练手文章,不出意外地火了: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本,出乎意料的火了: 简年18: ...