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. swift3.0 基础练习-构造对象并按要求进行排序(struct)

    struct练手 构造10个学生(要求有学生的姓名.数学成绩.英语成绩),按照学生英语和数学平均分的成绩从小到大输出学生的姓名.数学成绩.英语成绩及平均分 创建一个学生构造体,包含 姓名 name 数 ...

  2. Java以及PHP安装环境

    开学前想把web的知识系统掌握一下,跟着极客学院学html5. 安装了intellij idead.xampp.jdk.eclipse for php. 下面列举一些安装过程中会出现的问题,以及解决. ...

  3. 【Django】request 处理流程（转）

    Django 和其他 Web 框架的 HTTP 处理的流程大致相同,Django 处理一个 Request 的过程是首先通过中间件,然后再通过默认的 URL 方式进行的.我们可以在 Middlewar ...

  4. Django中ORM模型总结(一)[概述，查询语句]

    理解ORM框架 概述 O:(objects)->类和对象. R:(Relation)->关系,关系数据库中的表格. M:(Mapping)->映射. 作用: 可以通过类和类对象就可以 ...

  5. C#导入导出Excele数据

    注:对于实体类对象最好新建一个并且继承原有实体类,这样可以将类型进行修改: 方法一:此种方法是用EPPLUS中的FileInfo流进行读取的(是不是流我还真不太了解,若有懂得请留言,非常感谢了) us ...

  6. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  7. rpm体系下的linux安装httpd+mysql+…

    一.安装apache 在rpm体系下,apache称为httpd. yum install httpd 即可! 二.安装mysql yum install mysql 三.安装mysql-server ...

  8. Linux常用脚本命令总结

    基本操作 通用操作 1. export 显示所有的环境变量,也可以获取到某个变量的详细信息: export # 显示所有 echo $SHELL # 只显示SHELL 2. whereis 使用系统自 ...

  9. ABP+AdminLTE+Bootstrap Table权限管理系统第二节--数据库脚本

    第一点,上一篇文章中我们讲到codefirst中一些问题包括如图 1,codefirst在执行的数据库迁移过程中产生了很多文件,对于强迫症的我而言特别不爽,这些是可以不用生成的啊 2,在codefir ...

  10. NYOJ 5 Binary String Matching

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...