• CSS:scrollbar的属性及样式分类


    • overflow            内容溢出时的设置(设定被设定对象是否显示滚动条)
    • overflow-x         水平方向内容溢出时的设置
    • overflow-y         垂直方向内容溢出时的设置

        以上三个属性设置的值为visible(默认值)scroll、hidden、auto

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

    我们通过几个实例来讲解上述的样式属性: 
    1.让浏览器窗口永远都不出现滚动条

    •     没有水平滚动条    <body style="overflow-x:hidden">
    •     没有垂直滚动条    <body style="overflow-y:hidden">
    •     没有滚动条    <body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> http://www.o.com

    2.设定多行文本框的滚动条 

    •   没有水平滚动条   <textarea style="overflow-x:hidden"></textarea> 
    •   没有垂直滚动条   <textarea style="overflow-y:hidden"></textarea>
    •   没有滚动条         <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>   或<textarea style="overflow:hidden"></textarea>

    3.设定窗口滚动条的颜色

    设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
    scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
    加上一点特别的效果:
    <body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"> 

    4.在样式表文件中定义好一个类,调用样式表。

    <style>
      .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
    </style>

    这样调用:

    <textarea class="coolscrollbar"></textarea>
    • Scrollbar-Face-Color          为滚动条表面颜色设定;
    • Scrollbar-Highlight-Color    为滚动条上斜面和左斜面颜色设定;
    • Scrollbar-Shadow-Color     为滚动条下斜面和右斜面颜色设定;
    • Scrollbar-3Dlight-Color      为滚动条上边和左边的边沿颜色设定;
    • Scrollbar-Arrow-Color        为滚动条两端箭头颜色设定。
    • Scrollbar-Track-Color         为滚动条底板颜色设定;
    • Scrollbar-Darkshadow        为滚动条下边和右边边沿颜色设定。

     举例:

    body { 
    background-color: #ffffff; 
    color: #336699; 
    SCROLLBAR-FACE-COLOR: #BED8EB; 
    SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
    SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
    SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
    SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
    SCROLLBAR-TRACK-COLOR:#BED8EB; 
    SCROLLBAR-ARROW-COLOR: #92C0D1 
    } 

    说明:滚动条必须和div的height配合使用,如果div未设置height,则滚动条属性设置会失效

  • 相关阅读:
    将vue文件script代码抽取到单独的js文件
    git pull 提示错误:Your local changes to the following files would be overwritten by merge
    vue和uniapp 配置项目基础路径
    XAMPP Access forbidden! Access to the requested directory is only available from the local network.
    postman与newman集成
    postman生成代码段
    Curl命令
    POST方法的Content-type类型
    Selenium Grid 并行的Web测试
    pytorch转ONNX以及TnesorRT的坑
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/3151838.html
Copyright © 2020-2023  润新知