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. easyUI日期框返回到月份，选择日期也只到月份

    easyUI日期框返回到月份,选择日期也只到月份,不是原创,引用了园友的一篇文章,自己写下来,以便不时之需,谢谢. 1 $(function () { $('#date').datebox({ onS ...

  2. ssh连接异常：read from socket failed connection reset by peer

    我出现这个问题的原因是:之前将/etc的权限设为777, 这是一个错误的操作!!然后我把权限修改过来(chmod 400 /etc) 重启服务(/bin/systemctl restart ssh.s ...

  3. java.net.UnknownHostException 异常解决方案

    1)使用hostname命令设置新的host name与/etc/hosts本机hostname一致 #hostname 本机hostname 具体可以查看:/etc/hosts和//etc/sysc ...

  4. innodb关键特性之double write

    # 脏页刷盘的风险 两次写的原理机制 1.解决问题 2.使用场景 3.doublewrite的工作流程 4.崩溃恢复 # doublewrite的副作用 1.监控doublewrite负载 2.关闭d ...

  5. (转)Java线程：大总结

    Java线程:大总结   Java线程是Java语言中一个非常重要的部分,Java5之前,多线程的语言支持还是比较弱的,内容也较少,写一个复杂的多线程程序是相当有挑战性的.   在Java5以后,Ja ...

  6. vue使用之剑走偏锋——菜单组件篇

    背景 习惯了这样的写法了,上来先来一个背景,交待一下事情的起因.事情的起因很简单,用惯了mvc框架,想来一发前后端完全分离的框架试试.选用的人员和技术是这样子的,让原本做java的web开发的人员使用 ...

  7. 给ubuntu的swap分区增加容量

    1.创建一个 Swap 文件. mkdir swap cd swap sudo dd if=/dev/zero of=swapfile bs=1024 count=100000 出现下列提示,上面命令 ...

  8. nginx响应高并发参数配置

    一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1.  worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu ...

  9. vue+mockjs 模拟数据，实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  10. 看完给跪了：技术大牛总结的Github与华为软件开发云完整对比

    华为软件开发云配置管理 服务和Github是国内外比较有代表性的代码托管平台,它们以git作为版本管理工具,使项目中身处各地的人员可以协同工作,主要操作涉及仓库.分支.提交.pull request等 ...