DIV滚动条显示

全栈程序员-站长 • 2022年7月13日上午6:16 • 未分类 • 阅读 15

大家好，又见面了，我是你们的朋友全栈君。

DIV滚动条

所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场

1、滚动条常用属性：
overflow：auto为自动，scroll为出现滚动条
overflow-x：横向滚动条
overflow-y：纵向滚动条

代码样例：

  
  
  
   
   
   <
   
   
   div 
   
   
   style
   
   
   ="width:260px;height:120px; overflow:auto; border:1px solid;"
   
   
   >
   
   
   
 　　这里是你要显示的内容，只有需要时才出现滚动条。
   
   
   </
   
   
   div
   
   
   >
   
   
   

   
   
   <
   
   
   div 
   
   
   style
   
   
   ="width:260px;height:120px; overflow:scroll; border:1px solid;"
   
   
   >
   
   
   
 　　这里是你要显示的内容，无论是否需要都出现滚动条。
   
   
   </
   
   
   div
   
   
   >
   
   
   

   
   
   <
   
   
   div 
   
   
   style
   
   
   ="width:260px;height:120px; overflow-y:scroll; border:1px solid;"
   
   
   >
   
   
   
 　　这里是你要显示的内容，只出现Y-纵向滚动条。
   
   
   </
   
   
   div
   
   
   >
   
   
   

   
   
   <
   
   
   div 
   
   
   style
   
   
   ="width:260px;height:120px; overflow-x:scroll; border:1px solid;"
   
   
   >
   
   
   
 　　这里是你要显示的内容，只出现X-横向滚动条。
   
   
   </
   
   
   div
   
   
   >

2、滚动条相关颜色属性：
scrollbar-face-color：滚动条滑块部分的颜色
scrollbar-highlight-color：滚动条空白部分的颜色
scrollbar-shadow-color：滚动条阴影的颜色
scrollbar-arrow-color：上下按钮三角箭头的颜色
scrollbar-base-color：滚动条的基本颜色
scrollbar-darkshadow-color：滚动条强阴影的颜色
scrollbar-track-color：滚动条滑道颜色

代码样例：

  
  
  
   
   
   span style="color: #0000ff;"><
   
   
   div 
   
   
   style
   
   
   ="overflow:scroll;width:260px;height:120px; 
　　scrollbar-face-color:#ffffff;
　　scrollbar-highlight-color:#ffffff;
　　scrollbar-shadow-color:#919192;
　　scrollbar-arrow-color:#919192;
　　scrollbar-base-color:#900000;
　　scrollbar-darkshadow-color:#ffffff;
　　scrollbar-track-color:#ffffff;"
   
   
   >
   
   
    
　　这里是你要显示的内容。设置滚动条颜色。

   
   
   </
   
   
   div
   
   
   >