zoukankan      html  css  js  c++  java
  • css自定义滚动条样式

    html:

    <div class=" scrollbar-btn"></div>

    css:

    /*滚动条样式*/
    .scrollbar-btn::-webkit-scrollbar {  /*滚动条整体部分*/
        width: 10px;
        height: 10px;
    }
    .scrollbar-btn::-webkit-scrollbar-button {  /*滚动条两端的按钮*/
        background-color: #0f212f99;
    }
    .scrollbar-btn::-webkit-scrollbar-track {  /*外层轨道*/
        background: #11232fa8;
    }
    .scrollbar-btn::-webkit-scrollbar-track-piece {  /*内层轨道*/
        background: url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
    }
    .scrollbar-btn::-webkit-scrollbar-thumb {  /*滚动条里面可以拖动的那部分*/
        background: #47616336;
        border-radius: 4px;
    }
    .scrollbar-btn::-webkit-scrollbar-corner {  /*边角*/
        background: #1b222f;
    }
    .scrollbar-btn::-webkit-scrollbar-resizer {  /*定义右下角拖动块的样式*/
        background: #FF0BEE;
    }

    webkit内核的浏览器滚动条定制

    • ::-webkit-scrollbar        滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
    • ::-webkit-scrollbar-button      滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
    • ::-webkit-scrollbar-track         外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
    • ::-webkit-scrollbar-track-piece        内层轨道,滚动条中间部分(除去)。
    • ::-webkit-scrollbar-thumb               滚动条里面可以拖动的那部分
    • ::-webkit-scrollbar-corner               边角
    • ::-webkit-resizer                       定义右下角拖动块的样式

    注意:对以上各个部分定义width,height时。有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。

    【详细参考文章:https://www.lyblog.net/detail/314.html

  • 相关阅读:
    【火炉炼AI】机器学习003-简单线性回归器的创建,测试,模型保存和加载
    【火炉炼AI】机器学习002-标记编码方法
    【火炉炼AI】机器学习001-数据预处理技术(均值移除,范围缩放,归一化,二值化,独热编码)
    HOJ 13830 DNA Sequencing
    HDU 6078 Wavel Sequence
    hoj 13814 Cake cut
    HDU6071 Lazy Running
    HDU 6070 Dirt Ratio
    HDU 6070 Dirt Ratio
    HDU 6059 Kanade's trio
  • 原文地址:https://www.cnblogs.com/miny-simp/p/9758476.html
Copyright © 2011-2022 走看看