有时候觉得浏览器自带的原始滚动条不是很美观，那webkit浏览器是如何自定义滚动条的呢？

Webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。

  1. ::-webkit-scrollbar 滚动条整体部分
  2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平)
  3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
  4. ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
  5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去)
  6. ::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
  7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar</title>
</head>
<style type="text/css">

.scrollbar1{
margin:20px auto;
width:200px;
height:100px;
overflow: auto;
}

.scrollbar2{
margin:20px auto;
width:200px;
height:100px;
overflow: auto;
}

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

// scrollbar

.scrollbar2::-webkit-scrollbar-corner {
background-color: transparent;
}

.scrollbar2::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}

.scrollbar2::-webkit-scrollbar-thumb {
width: 7px;
background-color: #b4babf;
border-radius: 7px;
}

.scrollbar2::-webkit-scrollbar {
width: 7px;
height: 7px;
}

.scrollbar2::-webkit-scrollbar-track {
width: 15px;
}

.scrollbar2::-webkit-scrollbar:hover {
background-color: transparent;
}
.btns{
width: 400px;
height: 50px;
text-align: center;
margin:100px auto 0 auto;
}
button
{
text-decoration:none;
background:#47B2EA;
color:#f2f2f2;

padding: 10px 30px 10px 30px;
font-size:16px;
font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
font-weight:bold;
border-radius:3px;

-webkit-transition:all linear 0.30s;
-moz-transition:all linear 0.30s;
transition:all linear 0.30s;
}
button:hover{
cursor: pointer;
opacity: 0.8;
}
</style>

<body>
<div class="btns">
<button class="one">样式1</button>
<button class="two">样式2</button>
</div>
<div id='show' class="scrollbar1">番茄工作法是弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个X短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。</div>
<script>
var show=document.querySelector("#show")
var one=document.querySelector(".one")
var two=document.querySelector(".two")
one.onclick=function(){
show.className="scrollbar1"
}
two.onclick=function(){
show.className="scrollbar2"
}
</script>
</body>
</html>

导航条优化

  1. div {
  2.     background: #2b2e37;
  3.     height: 200px;
  4.     position: relative
  5.     background:url('bg.jpg')
  6. }
  7. div:before {
  8.     background:url('bg.jpg')
  9.     content: "";
  10.     width: 100%;
  11.     height: 40px;
  12.     position: absolute;
  13.     top: 0;
  14.     bottom: 0;
  15.     background: #2b2e37;
  16.     filter: blur(10px);
  17.     z-index: 0;
  18. }

滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)的更多相关文章

  1. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  2. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  3. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  4. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  6. css3 自定义滚动条样式

    ::-webkit-scrollbar :滚动条整体部分 ::-webkit-scrollbar-thumb :滚动条里面的小方块样式 ::-webkit-scrollbar-track 滚动条的轨道 ...

  7. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  8. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  9. CSS3自定义滚动条样式方法

    该代码收集于网上资源,非原创 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: ...

随机推荐

  1. LeetCode（101）Symmetric Tree

    题目 Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). Fo ...

  2. python基础——7（函数）

    一.函数的定义(函数一定是先定义,后引用) 函数是完成特定功能的代码块. def:声明函数的关键字 fun:函数变量名 ():参数列表,参数可以是0-n个,但是()不能丢 函数体:实现功能的具体代码 ...

  3. 【02】使用Firebug查看和编辑HTML和CSS

    使用Firebug查看和编辑HTML和CSS 描述 在本章节的教程中,我们将讨论如何使用Firebug查看和编辑HTML和CSS. 使用Firebug查看和编辑HTML 在你要查看的元素上右击鼠标然后 ...

  4. xtu summer individual 4 C - Dancing Lessons

    Dancing Lessons Time Limit: 5000ms Memory Limit: 262144KB This problem will be judged on CodeForces. ...

  5. 七牛云成功通过 CMMI3 认证

    10 月 31 日,在上海七牛信息技术有限公司青岛会议室举行的 CMMI3 级认证结果发布会上,主任评估师王庆付老师和评估组向公司高层及参与评审的 EPG 成员及项目组成员郑重宣布:经过严格的现场审核 ...

  6. HDU4135容斥原理

    #include <cstdio> #include <string.h> #include <cmath> using namespace std; #defin ...

  7. docker持续集成部署、csphere监控平台【转：http://blog.csdn.net/java_dyq/article/details/51997024】

    为什么使用Docker “ 从我个人使用的角度讲的话  部署来的更方便 只要构建过一次环境 推送到镜像仓库 迁移起来也是分分钟的事情 虚拟化让集群的管理和控制部署都更方便 hub.docker.com ...

  8. 【electron系列之二】复制图片

    // 复制图片 ipcMain.on("copy",(event, arg) =>{ const imagePath = path.join(appPath, `page/i ...

  9. HDU 3001【状态压缩DP】

    题意: 给n个点m条无向边. 要求每个点最多走两次,要访问所有的点给出要求路线中边的权值总和最小. 思路: 三进制状态压缩DP,0代表走了0次,1,2类推. 第一次弄三进制状态压缩DP,感觉重点是对数 ...

  10. 第三方APP集成微信登陆功能详解

    授权后接口调用(UnionID) 通过code获取access_token 接口说明 通过code获取access_token的接口. 请求说明 http请求方式: GET https://api.w ...