• CSS自定义滚动条样式


    IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。
        这些样式规则很简单:
        •scrollbar-arrow-color: color; /*三角箭头的颜色*/
        •scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
        •scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
        •scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
        •scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
        •scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
        •scrollbar-track-color: color; /*立体滚动条背景颜色*/
        •scrollbar-base-color:color; /*滚动条的基色*/
        大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。
        一下是几种滚动条的特效: 
        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>
        ?/P>

  • 相关阅读:
    LibreOJ2302
    POJ3693
    BZOJ3697
    BZOJ2599
    BZOJ2152
    BZOJ1468
    BZOJ4653
    BZOJ4553
    BZOJ4552
    BZOJ4551
  • 原文地址:https://www.cnblogs.com/huangf714/p/5876785.html
Copyright © 2020-2023  润新知