vb滚动条控件怎么设置（滚动条基本样式设置）

::-webkit-scrollbar 系列属性

详细使用说明 ::-webkit-scrollbar 注意：如果没有设置滚动溢出的相关属性                   ，滚动条样式系列属性不会生效（resize 除外）                   。 属性 ::-webkit-scrollbar 整个滚动条
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。 ::-webkit-scrollbar-button 滚动条上的按钮（上下箭头）

















。 ::-webkit-scrollbar-thumb 滚动条上的滚动滑块  
  
  
  
  
  
  
  
  
 。 ::-webkit-scrollbar-track 滚动条轨道 
  
  
  
  
  
  
  
  
 。 ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分


 


 


 


 


 


 


 


 


 
。 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分 
 
 
 
 
 
 
 
 
。通常是浏览器窗口的右下角  
   
   
   
   
   
   
   
   
  。 ::-webkit-resizer 出现在某些元素底角的可拖动调整大小的滑块

 

 

 

 

 

 

 

 

 
。 注意：该系列属性在没有优先设置 ::-webkit-scrollbar 时
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，其他滚动条相关样式不会生效（resize 除外）
 

 

 

 

 

 

 

 

 
。 常用：::-webkit-scrollbar 
  
  
  
  
  
  
  
  
 、::-webkit-scrollbar-thumb 
  
  
  
  
  
  
  
  
  、::-webkit-scrollbar-track（示例见“基本使用                   ”）

属性使用示例

未使用该系列属性时的样式

后续设置比较强烈的颜色

















，易与区分属性生效的部分                   。 ::-webkit-scrollbar 整个滚动条 <div> <div class="father"> <div class="child">子元素  
  
  
  
  
  
  
  
  
 ，高度大于父元素 
  
  
  
  
  
  
  
  
 ，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 20px; /* 设置滚动条背景色 */ background: blue; } </style> ::-webkit-scrollbar-button 滚动条上的按钮（上下箭头） <div> <div class="father"> <div class="child">子元素


 


 


 


 


 


 


 


 


 
，高度大于父元素 
 
 
 
 
 
 
 
 
，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 20px; /* 设置滚动条背景色 */ background: blue; } ::-webkit-scrollbar-button { /* 滚动条上下箭头的颜色 */ background: yellow; } </style> ::-webkit-scrollbar-thumb 滚动条上的滚动滑块 <div> <div class="father"> <div class="child">子元素  
   
   
   
   
   
   
   
   
  ，高度大于父元素

 

 

 

 

 

 

 

 

 
，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 20px; /* 设置滚动条背景色 */ background: blue; } ::-webkit-scrollbar-button { /* 滚动条上下箭头的颜色 */ background: yellow; } ::-webkit-scrollbar-thumb { /* 滚动条滑块圆角 */ border-radius: 8px; /* 滚动条滑块背景色 */ background: skyblue; } </style> ::-webkit-scrollbar-track 滚动条轨道 <div> <div class="father"> <div class="child">子元素
 

 

 

 

 

 

 

 

 
，高度大于父元素                   ，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 20px; /* 设置滚动条背景色 */ background: blue; } ::-webkit-scrollbar-button { /* 滚动条上下箭头的颜色 */ background: yellow; } ::-webkit-scrollbar-thumb { /* 滚动条滑块圆角 */ border-radius: 8px; /* 滚动条滑块背景色 */ background: skyblue; } ::-webkit-scrollbar-track { /* 滚动条轨道背景色 */ background: orange; /* 滚动条轨道圆角 */ border-radius: 10px; } </style> ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分 <div> <div class="father"> <div class="child">子元素
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，高度大于父元素

















，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 20px; /* 设置滚动条背景色 */ background: blue; } ::-webkit-scrollbar-button { /* 滚动条上下箭头的颜色 */ background: yellow; } ::-webkit-scrollbar-thumb { /* 滚动条滑块圆角 */ border-radius: 8px; /* 滚动条滑块背景色 */ background: skyblue; } ::-webkit-scrollbar-track { /* 滚动条轨道背景色 */ background: orange; /* 滚动条轨道圆角 */ border-radius: 10px; } ::-webkit-scrollbar-track-piece { /* 滚动条轨道背景色 */ /* 覆盖在轨道上方                            ，黑色半透明与橙色叠加 */ background: rgba(0, 0, 0, 0.3); } </style> ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。通常是浏览器窗口的右下角 <div> <div class="father"> <div class="child">子元素
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，高度大于父元素


























，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; width: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 20px; /* 设置滚动条背景色 */ background: blue; } ::-webkit-scrollbar-button { /* 滚动条上下箭头的颜色 */ background: yellow; } ::-webkit-scrollbar-thumb { /* 滚动条滑块圆角 */ border-radius: 8px; /* 滚动条滑块高度 */ height: 100px; /* 滚动条滑块背景色 */ background: skyblue; } ::-webkit-scrollbar-track { /* 滚动条轨道背景色 */ background: orange; /* 滚动条轨道圆角 */ border-radius: 10px; } ::-webkit-scrollbar-track-piece { /* 滚动条轨道背景色 */ /* 覆盖在轨道上方                   ，黑色半透明与橙色叠加 */ background: rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-corner { /* 横向

 


 


 


 


 


 


 


 


 

、纵向滚动条的交汇背景色 */ background: red; } </style> ::-webkit-resizer 出现在某些元素底角的可拖动调整大小的滑块 <div> <div class="father"> <div class="child">子元素
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，高度大于父元素

















，撑开父元素</div> </div> </div> <style> .father { background: #eee; /* 原始宽度为 400px  
  
  
  
  
  
  
  
  
 ，下方图示为拖拽后的样式 
  
  
  
  
  
  
  
  
 ，明显比 400px 宽 */ width: 400px; height: 600px; /* 设置不溢出


 


 


 


 


 


 


 


 


 
，其他滚动条样式设置会失效 */ overflow: hidden; /* 父元素设置可拖拽属性 */ resize: horizontal; margin: 50px auto; } .child { height: 700px; width: 700px; font-size: 20px; font-weight: bold; } ::-webkit-resizer { /* 设置右下角可拖拽部分的背景色 */ background: rgba(0, 0, 0, 0.3); } </style>

基本应用

<div> <div class="father"> <div class="child">子元素 
 
 
 
 
 
 
 
 
，高度大于父元素  
   
   
   
   
   
   
   
   
  ，撑开父元素</div> </div> </div> <style> .father { background: #eee; width: 400px; height: 600px; overflow-y: auto; margin: 50px auto; } .child { height: 700px; font-size: 20px; font-weight: bold; } ::-webkit-scrollbar { width: 5px; background: #eee; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb { border-radius: 3px; height: 100px; background-color: #ccc; } </style>

兼容性