浏览器滚动条样式还可以改变，你知道吗？

时间：2021-04-28 15:01:55 阅读：31 评论：0 收藏：0 [点我收藏+]

有时候，我们是不是觉得浏览器默认的滚动条很low，那么浏览器滚动条样式能否改变呢，答案是肯定的，今天就给大家分享一下怎么改变浏览器的默认滚动条，让我们的页面更加炫酷。

在次之前，我们先来了解一下滚动条产生的原因，通俗的来讲就是内容超出容器就会出现滚动条。

verflow介绍

<h5>定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。
属性值

overflow:visible //默认值。内容不会被修剪，超出内容会显示在元素框之外
 
overflow:hidden //内容会被修剪。超出内容被隐藏
 
overflow:scroll //内容会被修剪，浏览器会显示滚动条以便查看其余内容
 
overflow:auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
 
overflow:inherit //规定从该父元素继承overflow属性的值`

注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

当overflow设为除默认值（visible）以外的值时，将会创建一个会块级式化上下文（清除浮动的一种方式），更多可查看深入理解BFC和Margin Collapse

下面直接进入教程，以Google浏览器为例：

效果图：

技术分享图片

webkit内核的浏览器滚动条样式

首先给两个div，两个div是父子关系，里面的div宽高比外面的宽高值大，再加上overflow：hidd属性模拟出现滚动条效果，然后进行css更改样式。

html部分

 
<style>
 
#scrollbar {
 
width:300px;
 
height:300px;
 
overflow:auto;
 
float: left;
 
}
 
#scrollbar div {
 
width:800px;
 
height:2000px;
 
}
 
</style>
 
<body>
 
<div id=‘scrollbar‘>
 
<div ></div>
 
</div>
 
</body>
css样式

 
<style>
 
#scrollbar::-webkit-scrollbar { 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
 
width:12px;
 
height:12px;
 
}
 
#scrollbar::-webkit-scrollbar-button { 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
 
width:12px;
 
height:12px;
 
}
 
#scrollbar::-webkit-scrollbar-track { 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
 
background: #232428;
 
border-radius: 20px;
 
 
 
}
 
#scrollbar::-webkit-scrollbar-track-piece { 内层轨道，滚动条中间部分（除去）。
 
background: #232428;
 
border-radius: 20px;
 
}
 
#scrollbar::-webkit-scrollbar-thumb { 滚动条里面可以拖动的那部分
 
background:#85868B;
 
border-radius:50px;
 
}
 
#scrollbar::-webkit-scrollbar-corner { 边角
 
background:#fff;
 
}
 
#scrollbar::-webkit-scrollbar-resizer { 定义右下角拖动块的样式
 
background:#fff;
 
}
 
</style>

这里给大家做了个图,方便大家理解：

技术分享图片