整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
,改變瀏覽器默認的滾動條樣式
::-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小時內與您取得聯系。
