一个完整滚动条右以下部分组成:
-
::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border;
::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;
::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分;
::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分;
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分;
::-webkit-scrollbar-corner 边角;
::-webkit-resizer 定义右下角拖动块的样式2.借用一张网上挺不错的图片说明:
<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>