自定义个性滚动条css样式全程攻略

最新推荐文章于 2023-02-20 22:32:08 发布

faunjoe

最新推荐文章于 2023-02-20 22:32:08 发布

阅读量1.1k

点赞数

分类专栏： Div+CSS 文章标签： css scroll 工具 windows

本文链接：https://blog.csdn.net/faunjoe/article/details/4563027

版权

Div+CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

滚动条代码：

&;amp;nbsp;
<STYLE>
BODY{BORDER-LEFT:
#ECF1F4
7px
solid;BORDER-RIGHT:
#ECF1F4
7px
solid;margin:0;

/*控制滚动条左右侧实线颜色*/

overflow-x:hidden; /*隐藏底部的横向滚动条*/
scrollbar-arrow-color:
#f4ae21
;

/*三角箭头的颜色*/
scrollbar-face-color:

#333
;

/*立体滚动条的颜色*/
scrollbar-3dlight-color:

#666
;

/*立体滚动条亮边的颜色*/
scrollbar-highlight-color:

#666
;
/*滚动条空白部分的颜色*/
scrollbar-shadow-color:

#999
;

/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:

#666
;
/*滚动条强阴影颜色*/
scrollbar-track-color:

#666
;

/*立体滚动条背景颜色*/
scrollbar-base-color:

#f8f8f8
;
/*滚动条的基本颜色*/}
</STYLE>

1.代码说明参照上面的文字说明（文字没有必要删除，如为了美观可以删除。
）；

2. BORDER-LEFT: #ECF1F4
7px solid;BORDER-RIGHT:
#ECF1F4
7px
solid;margin:0;
这段代码可以删去，根据自己的需要操作即可。

上面的代码的确很麻烦，有没有一种简单直观的形式呢？哈哈这个自然了！我们都喜欢傻瓜式的啦。本人博客的绿色滚动条就是这个工具做的。下面冰河就介绍一下

个性滚动条配色工具（一）：

操作说明：
调色的时候先在
Flat
那里选择
Windows
，然后根据自己爱好进行调色，调好之后选中“
CSS
”代码，复制方框里的代码，就可以添加到博客自定义面板了。
注意：这是CSS代码，不能放在完全没有东西的空白面板里，可以把它放到已有内容的面板中。
代码举例：

&;amp;nbsp;
<style>
/*注：在代码前添加　&;amp;nbsp;　防止屏蔽*/

BODY { SCROLLBAR-ARROW-COLOR:#0033FF;
SCROLLBAR-FACE-COLOR:#0033CC;
SCROLLBAR-DARKSHADOW-COLOR:#0033CC;
SCROLLBAR-HIGHLIGHT-COLOR:#993399;
SCROLLBAR-3DLIGHT-COLOR:#996633;
SCROLLBAR-SHADOW-COLOR:#993366;
SCROLLBAR-TRACK-COLOR:#996600;}
</style>

个性滚动条配色器（二）：

几种滚动条的特效：
　

1、控制横向和纵向滚动条的显隐
去掉滚动条 x 轴 <body
style="overflow-y:hidden">
去掉滚动条 y 轴 <body style="overflow-x:hidden">
滚动条 x/y 轴全部去掉 <body scroll="no">
2、滚动条颜色
<style>
BODY{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;}
</style>
SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR 滚动条的基本颜色
3、箭行符号滚动条代码
<style type="text/css">

</style>
4、一侧滚动条代码
<style type="text/css">

</style>
5、朴素型滚动条代码
<style type="text/css">

</style>
6、一侧滚动条代码
<style type="text/css">

</style>
7、立体型滚动条代码
<style type="text/css">

</style>
?/P>

如果你是新手建议你看文章
：
如何添加自己的代码到版块（图示）新手必读

添加方法：

１
，控制面板----首页内容维护----定义空白模板----新建,创建模块标题，
显示源代码
粘贴代码--保存并返回；

２
，控制面板----定制我的首页----点添加模块----点选创建好的模块标题---勾上并保存，移动新建面板位置--保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来

滚动条的美化自然应该列为一个重要的内容放在博客装饰教程中详细的讲解，与博客主色调合理搭配是是滚动条美化的基本要求。大家不应该做出一个与主体完全不符的样式来，这个另类的做法只能让人家一看就知道你是外行来了。冰河今天就整理出这篇文章来希望可以解决大家存在的问题。

本文由冰河独立整理完成。如有雷同，纯属巧合
！

滚动条代码：

&;amp;nbsp;
<STYLE>
BODY{BORDER-LEFT:
#ECF1F4
7px
solid;BORDER-RIGHT:
#ECF1F4
7px
solid;margin:0;

/*控制滚动条左右侧实线颜色*/

overflow-x:hidden; /*隐藏底部的横向滚动条*/
scrollbar-arrow-color:
#f4ae21
;

/*三角箭头的颜色*/
scrollbar-face-color:

#333
;

/*立体滚动条的颜色*/
scrollbar-3dlight-color:

#666
;

/*立体滚动条亮边的颜色*/
scrollbar-highlight-color:

#666
;
/*滚动条空白部分的颜色*/
scrollbar-shadow-color:

#999
;

/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:

#666
;
/*滚动条强阴影颜色*/
scrollbar-track-color:

#666
;

/*立体滚动条背景颜色*/
scrollbar-base-color:

#f8f8f8
;
/*滚动条的基本颜色*/}
</STYLE>

1.代码说明参照上面的文字说明（文字没有必要删除，如为了美观可以删除。
）；

2. BORDER-LEFT: #ECF1F4
7px solid;BORDER-RIGHT:
#ECF1F4
7px
solid;margin:0;
这段代码可以删去，根据自己的需要操作即可。

个性滚动条配色工具（一）：

&;amp;nbsp;
<style>
/*注：在代码前添加　&;amp;nbsp;　防止屏蔽*/

个性滚动条配色器（二）：

几种滚动条的特效：
　

faunjoe

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自定义个性滚动条css样式全程攻略

滚动条代码：&;amp;nbsp;BODY{BORDER-LEFT: #ECF1F47pxsolid;BORDER-RIGHT: #ECF1F47pxsolid;margin:0; /*控制滚动条左右侧实线颜色*/overflow-x:hidden; /*隐藏底部的横向滚动条*/scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/scrollbar
复制链接

扫一扫