CSS滚动条实现步骤及美化小技巧

本文链接：https://blog.csdn.net/qq_42526440/article/details/124229621

css控制的滚动条应该如何实现和隐藏呢？滚动条能不能换颜色或者做的更好看一些。
1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容；overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。

参数:

visible：扩大面积以显示所有内容
auto：仅当内容超出限定值时添加滚动条
hidden：总是隐藏滚动条
scroll：总是显示滚动条

2、height : 设置滚动条的高度（修改其后数值即可）。

3、滚动条颜色参数设置：

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
scrollbar-base-color 设置或检索滚动条基准颜色

设置滚动条样式

在原来的 html 的时候，我们可以这样定义整个页面的滚动条

body{ 
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ 
   scrollbar-highlight-color:#fff; /*- 左二 -*/ 
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/ 
   scrollbar-arrow-color:#666; /*- 箭头 -*/ 
   scrollbar-shadow-color:#808080; /*- 右二 -*/ 
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ 
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/ 
   scrollbar-track-color:#;/*- 滑道 -*/ 
}

用CSS调整滚动条配色

IE浏览器可以通过调整CSS的方式，来给滚动条换色。

 .uicss-cn
{
height:580px;

overflow-y: scroll;

scrollbar-face-color:#EAEAEA;

scrollbar-shadow-color:#EAEAEA;

scrollbar-highlight-color:#EAEAEA;

scrollbar-3dlight-color:#EAEAEA;

scrollbar-darkshadow-color:#697074;

scrollbar-track-color:#F7F7F7;

scrollbar-arrow-color:#666666;
}