JavaScript编程交流 加入小组

20个成员 24个话题 创建时间:2015-09-15

滚动条样式大全

发表于2015-09-22 2466次查看

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">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>


        4、 一侧滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>


        5、 朴素型滚动条代码

<style type="text/css">
<!--
BODY {
scrollbar-face-color: white;
scrollbar-highlight-color: hotpink;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

        6、一侧滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>

        7、 立体型滚动条代码

<style type="text/css">
<!--
BODY {scrollbar-face-color: pink;
scrollbar-highlight-color: deeppink;
scrollbar-shadow-color: lavenderblush;
scrollbar-3dlight-color: lavenderblush;
scrollbar-arrow-color: white;
scrollbar-track-color: lavenderblush;
scrollbar-darkshadow-color: deeppink}
-->
</style>

发表回复
你还没有登录,请先 登录或 注册!