前面的话

　　滚动条在网页中经常见到，却并没有受到足够的重视。只有当因为滚动条的问题需要处理兼容性时，才进行调试操作。本文就滚动条的常见内容进行梳理

条件

　　滚动条和overflow是紧密相关的。只有当父级的overflow的值是auto或scroll，并且元素的内容超出元素区域时，才有可能出现滚动条

默认

　　无论什么浏览器，默认滚动条均来自<html>，而不是<body>。因为<body>元素默认有8px的margin。若滚动条来自<body>元素，则滚动条与页面则应该有8px的间距，实际上并没有间距，所以滚动条来自<html>元素

尺寸

　　通过以下代码可得出滚动条会占用浏览器的可用宽度为：

chrome/firefox/IE 17px

safari 21px
.box{

    width: 400px;

    overflow: scroll;

}

.in{

    *zoom:;

}
<div class="box">

    <div id="in" class="in"></div>

</div>
console.log(400-document.getElementById('in').clientWidth);

兼容

【1】默认情况下IE7-浏览器默认有一条纵向滚动条，而其他浏览器则没有

//IE7-浏览器

html{overflow-y: scroll;}

//其他浏览器

html{overflow: auto;}

//去除页面默认滚动条

html{overflow: hidden;}

【2】IE7-浏览器与其他浏览器关于滚动条的宽度设定机制不同

.box{

    width: 200px;

    height: 100px;

    background-color: pink;

    overflow: scroll;

}

.in{

    width: 100%;

    height: 60px;

    background-color: lightgreen;

}
<div class="box">

    <div class="in">测试文字</div>

</div>

　　父级box出现纵向滚动条，实际上子级in的可用宽度就缩小了。IE7-浏览器的子级宽度忽略了该滚动条的宽度，子级宽度=400*100%=400px，则出现了横向滚动条；而其他浏览器的子级宽度考虑到该滚动条的宽度，子级宽度=(400-滚动条宽度)*100%

　　左图为IE7-浏览器，右图为其他浏览器

【3】水平居中跳动问题

　　当一个元素在页面中水平居中时，页面中出现纵向滚动条会发生水平居中的跳出问题。解决方法如下:

//IE8-默认

html{overflow-y: scroll}

//IE9+，100vw表示浏览器的宽度，100%表示可用内容的宽度

.container{padding-left: calc(100vw-100%)}

自定义

【1】IE

　　IE浏览器支持通过CSS样式来改变滚动条的部件的自定义颜色

scrollbar-face-color 滚动条凸出部分的颜色

scrollbar-shadow-color 立体滚动条阴影的颜色

scrollbar-highlight-color 滚动条空白部分的颜色

scrollbar-3dlight-color 滚动条亮边的颜色

scrollbar-darkshadow-color 滚动条强阴影的颜色

scrollbar-track-color 滚动条的背景颜色

scrollbar-arrow-color 上下按钮上三角箭头的颜色

scrollbar-base-color  滚动条的基本颜色

【2】webkit

　　webkit内核的浏览器支持滚动条自定义样式，但和IE不同，webkit是通过伪类来实现的

组成

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb 滚动滑块

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

::-webkit-scrollbar-track-piece 内层轨道

::-webkit-scrollbar-corner 边角

::-webkit-scrollbar-button 两端按钮

　　[注意]当为滚动条设置宽高样式为百分比值时，是相对视窗大小来说的

　　[注意]滚动条的层叠关系为scrollbar在最底层，往上依次是track外层轨道，track-piece内层轨道。而button按钮、corner边角和thumb滑块有最顶层

伪类相关

:horizontal

//horizontal伪类适用于任何水平方向上的滚动条

:vertical

//vertical伪类适用于任何垂直方向的滚动条

:decrement

//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮

:increment

//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮

:start

//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面

:end

//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面

:double-button

//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。

:single-button

//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。

:no-button

no-button伪类表示轨道结束的位置没有按钮。

:corner-present

//corner-present伪类表示滚动条的角落是否存在。

:window-inactive

//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

::-webkit-scrollbar-track-piece:start {

/*滚动条上半边或左半边*/

}

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

/*当焦点不在当前区域滑块的状态*/

}

::-webkit-scrollbar-button:horizontal:decrement:hover {

/*当鼠标在水平滚动条下面的按钮上的状态*/

}

常用设置

.box{

    width: 200px;

    height: 100px;

    background-color: pink;

    overflow: scroll;

    font-size: 20px;

    line-height: 40px;

}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

.box::-webkit-scrollbar

{

    width: 16px;

    height: 16px;

    background-color: #F5F5F5;

}

/*定义滚动条轨道 内阴影+圆角*/

.box::-webkit-scrollbar-track

{

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

    border-radius: 10px;

    background-color: #F5F5F5;

}

/*定义滑块 内阴影+圆角*/

.box::-webkit-scrollbar-thumb

{

    border-radius: 10px;

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

    background-color: #555;

}
<div class="box">我是特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长的测试文字</div>

样式类举

　　自定义滚动条源码

CSS滚动条的更多相关文章

  1. 如何自定义CSS滚动条的样式？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...

  2. CSS 滚动条宽度 All In One

    CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width sol ...

  3. CSS滚动条样式定制

    效果图如下 <!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scrol ...

  4. css 滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  5. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  6. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  7. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  8. DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  9. css滚动条样式

    1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden ...

随机推荐

  1. 自己搭建云存储(WIFI路由器上接硬盘)

    欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=49 http://www.cnet.com/how-to/share-an-extern ...

  2. nodejs安装/运行脚本

    本文主要介绍nodejs在windows下安装及运行脚本. 安装nodejs 先从nodejs官网:http://nodejs.org/下载对应的系统的安装包,比如用于64位系统的最新0.10.21的 ...

  3. 网页集成paypal支付

    在网站中集成paypal支付有两种方式: 1.通过paypal账户的按钮创建工具 进入paypal 商户账号,选择创建按钮工具,有包括添加到购物车.购买.租用三类按钮. 之后会生成一段代码,直接将代码 ...

  4. 图解集合1：ArrayList

    前言 这个分类中,将会写写Java中的集合.集合是Java中非常重要而且基础的内容,因为任何数据必不可少的就是该数据是如何存储的,集合的作用就是以一定的方式组织.存储数据.这里写的集合,一部分是比较常 ...

  5. Unity3D热更新全书-重头再来

    之前写了Unity3D热更新全书系列Blog 提出了下载.加载.脚本三个方面的开源类库 下载方面有EasyDown加载方面有GameObjParser脚本方面有C#Light另外有一个没有独立成库,但 ...

  6. 像素图的实时光照 Lighting on Pixel Art

    去年有这样一个工具,We got one toolkit last year. 他有什么功能呢?What is its function? 让你画出各个方向的照明图 That you can draw ...

  7. Android按需添加Google Play服务

    以前无论使用何种Google Play服务,都是直接在gradle文件中引用一个库. compile 'com.google.android.gms:play-services:9.4.0' 这直接导 ...

  8. 初识jsonp

    jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案.很多时候我们需要在客户端获取服务器数据进行操作,一般我们会使用ajax+webservice做此事,但是如 ...

  9. git rm–r folder fatal:pathspec "" did not match any files

    问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...

  10. jmap

    环境: 现有一个独立运行的系统S(有独立的jre,但是没jdk),现想通过jmap导出其内存堆栈信息.于是另外安装一个jdk.可是jdk的版本跟S系统的jre不能对应上.出了很多错误. 总是报错: C ...