說明
非標準屬性鞋邑，僅限webkit內(nèi)核瀏覽器给僵。
組成部分
一個完整滾動條右以下部分組成：
-
::-webkit-scrollbar滾動條整體部分，常用屬性：width,height,background,border； -
::-webkit-scrollbar-button滾動條兩邊的按鈕，默認不設置時不顯示链方，可設置高度、背景色灶搜、背景圖片祟蚀； -
::-webkit-scrollbar-track整個滾動條去除兩邊按鈕剩下的部分； -
::-webkit-scrollbar-track-piecetrack去掉拖拽剩下的部分割卖； -
::-webkit-scrollbar-thumb滾動條里面可以拖動的那部分前酿； -
::-webkit-scrollbar-corner邊角； -
::-webkit-resizer定義右下角拖動塊的樣式
DEMO
簡單演示DEMO鹏溯，不好看：
<style>
/* 設置整個滾動條的一些屬性罢维，寬度針對垂直滾動條，高度針對水平滾動條 */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
/* 滾動條頂部按鈕的樣式丙挽，如果不設置默認按鈕不顯示 */
::-webkit-scrollbar-button {
background-color: #FF945B;
}
::-webkit-scrollbar-button:hover {
background-color: #EF6A22;
}
::-webkit-scrollbar-button:active {
background-color: #B94608;
}
/* 整個滾動條去除button剩下的部分 */
::-webkit-scrollbar-track {
background: #D9DDD3;
}
/* 滾動條可拖拽的部分 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(178, 178, 178, 0.69);
}
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
::-webkit-scrollbar-thumb:active {
background-color: #666363;
}
.sample {
width: 600px;
height: 400px;
overflow: auto;
}
.sample-wrapper {
width: 1200px;
height: 1000px;
background: -webkit-linear-gradient(red, blue);
background: linear-gradient(red, blue);
color: white;
}
</style>
<div class="sample">
<div class="sample-wrapper">
<p>測試滾動示例1</p>
<p>測試滾動示例2</p>
<p>測試滾動示例3</p>
<p>測試滾動示例4</p>
<p>測試滾動示例5</p>
<p>測試滾動示例6</p>
<p>測試滾動示例7</p>
<p>測試滾動示例8</p>
</div>
</div>
稍微好看點的例子：
<style>
/* 設置整個滾動條的一些屬性肺孵，寬度針對垂直滾動條，高度針對水平滾動條 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 整個滾動條去除button剩下的部分 */
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #d8dce5
}
/* 滾動條可拖拽的部分 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #adadad;
}
::-webkit-scrollbar-thumb:hover {
background-color: #929292;
}
::-webkit-scrollbar-thumb:active {
background-color: #666363;
}
::-webkit-scrollbar-corner {
background-color: #535353
}
::-webkit-scrollbar-resizer {
background-color: #ff6e00
}
.sample {
width: 600px;
height: 400px;
overflow: auto;
}
.sample-wrapper {
width: 1200px;
height: 1000px;
background: -webkit-linear-gradient(red, blue);
background: linear-gradient(red, blue);
color: white;
}
</style>
<div class="sample">
<div class="sample-wrapper">
<p>測試滾動示例1</p>
<p>測試滾動示例2</p>
<p>測試滾動示例3</p>
<p>測試滾動示例4</p>
<p>測試滾動示例5</p>
<p>測試滾動示例6</p>
<p>測試滾動示例7</p>
<p>測試滾動示例8</p>
</div>
</div>
