整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
,改变浏览器默认的滚动条样式
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
background-color:#f8f8f8;
}
::-webkit-scrollbar {//滚动条的宽度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
二，给某个div .test1加滚动条样式
.test1::-webkit-scrollbar {
width: 8px;
}
.test1::-webkit-scrollbar-track {
background-color:red;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test1::-webkit-scrollbar-thumb {
background-color:green;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
三，malihu
malihu是一款高性能的滚动条美化jQuery插件。该滚动条美化插件支持水平和垂直滚动条，支持鼠标滚动，支持键盘滚动和支持移动触摸屏。
（1） 安装：
通过Bower或nmp来安装该滚动条美化插件
bower install malihu-custom-scrollbar-plugin
npm install malihu-custom-scrollbar-plugin
（2） 使用方法
使用该滚动条美化插件需要引入jQuery和jquery.mCustomScrollbar.concat.min.js以及jquery.mCustomScrollbar.css文件。
（3） 通过js来初始化
（4） 通过HTML来初始化
另外可以通过data-mcs-axis属性来设置是水平还是垂直滚动条，取值为x或y。
默认情况下该滚动条是垂直方向的滚动条，你可以通过配置参数将它设置为水平滚动条或两个方向上滚动条。
$(".content").mCustomScrollbar({
axis:"x" // 水平滚动条
});
多朋友，会觉得默认的css滚动条样式是很丑的吧，稍微改下-webkit-scrollbar（滚动条整体样式）、-webkit-scrollbar-thumb（滚动条里面小方块样式）、-webkit-scrollbar-track（滚动条里面轨道样式）就ok了，要改什么样的就改什么样的css滚动条。
改默认css滚动条样式，例子代码如下：
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>css滚动条样式</title>
<style type="text/css">
.box{
width: 600px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
border-right: 0;
}
.main{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: 16px;
height: 100%;
}
.main p{height:300px;}
/*-------滚动条整体样式----*/
.main::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.main::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:red;
}
/*滚动条里面轨道样式*/
.main::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="box">
<div class="main">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</div>
</div>
</body>
</html>
效果图：
特别注意：
实现单个div里面的内容滚动，必需满足以下3个条件：
1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值；
2、其中的内容高度必须超过它本身的高度；
3、必需要添加这个overflow:auto属性。
附：
overflow的属性和不同值得作用
1.overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示;
2.overflow:auto;在需要时剪切内容并添加滚动条;
3.overflow:hidden;不显示超过对象高度的内容;
4.overflow:scroll;总是显示纵向滚动条;
5.overflow 水平及垂直方向内容溢出时的设置;
6.overflow-x 水平方向内容溢出时的设置;
7.overflow-y 垂直方向内容溢出时的设置。
原文地址：http://tangjiusheng.com/divcss/159.html
::-webkit-scrollbar 只支持WebKit的浏览器 (谷歌Chrome, 苹果Safari)可以使用。
* {
scrollbar-width: thin;
// auto -浏览器默认滚动条宽度
// thin -设置比默认滚动条更窄的宽度
// none -隐藏滚动条，但是元素还可以滚动
// **px -直接设置滚动条的宽度
}
// 垂直滚动条和水平滚动条相交的部分
::-webkit-scrollbar-corner {
display: none;
width: 0;
height: 0;
}
// 整个滚动条
::-webkit-scrollbar {
width: 5px; // 宽度
height: 5px; // 高度
background-color: #a7b1c2; // 颜色
}
// 滚动条上的滚动滑块。
::-webkit-scrollbar-thumb {
width: 6px;
height: 6px;
background: rgba(0, 0, 0, 0.1);
background-clip: padding-box;
border: 2px solid transparent;
border-radius: 6px;
}
// 滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
// 滚动条轨道
::-webkit-scrollbar-track {
display: none;
}
// 滚动条没有滑块的轨道部分。
::-webkit-scrollbar-track-piece {
display: none;
}
// 右下角拖动块（如：textarea的可拖动按钮）
::-webkit-resizer {
background: #991d28;
}
*请认真填写需求信息，我们会在24小时内与您取得联系。
