自定义网页滚动条样式-优快云博客

本文链接：https://blog.youkuaiyun.com/mastermanager/article/details/2070153

网页滚动条样式

应用：

没有水平滚动条
<body style="overflow-y:scroll;overflow-x:hidden;">

没有垂直滚动条
style="overflow-y:hidden"

没有滚动条
style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden"

2．自己定义滚动条的颜色

scrollbar-3d-light-color 立体滚动条亮边的颜色
scrollbar-arrow-color 上下按钮上三角箭头的颜色
scrollbar-base-color 滚动条的基本颜色
scrollbar-dark-shadow-color 立体滚动条强阴影的颜色
scrollbar-face-color 立体滚动条凸出部分的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色

应用实例：

定义窗口滚动条的颜色(IE5.5+)：

代码:
BODY {
scrollbar-face-color: #C5D5FC; 全局颜色
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C5D5FC;
scrollbar-darkshadow-color: #7C9FD3;
scrollbar-track-color: #FFFFFF; 滚动条下面颜色
scrollbar-arrow-color: #4D6185; 三角型颜色
}

设置多行文本框的颜色：

代码:
<textarea style="scrollbar-face-color: #C5D5FC;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C5D5FC;
scrollbar-darkshadow-color: #7C9FD3;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #4D6185;">

…………

</textarea>

以上2项适用与<body>、<div>、<textarea>、<iframe>等