• 微信
    咨询
    微信在线咨询 服务时间:9:00-18:00
    纵横数据官方微信 使用微信扫一扫
    马上在线沟通
  • 业务
    咨询

    QQ在线咨询 服务时间:9:00-18:00

    选择下列产品马上在线沟通

    纵横售前-老古
    QQ:519082853 售前电话:18950029581
    纵横售前-江夏
    QQ:576791973 售前电话:19906048602
    纵横售前-小李
    QQ:3494196421 售前电话:18965140883
    纵横售前-小智
    QQ:2732502176 售前电话:17750597339
    纵横售前-燕子
    QQ:609863413 售前电话:17750597993
    纵横值班售后
    QQ:407474592 售后电话:400-1886560
    纵横财务
    QQ:568149701 售后电话:18965139141

    售前咨询热线:

    400-188-6560

    业务姚经理:18950029581

  • 关注

    关于纵横数据 更多优惠活动等您来拿!
    纵横数据官方微信 扫一扫关注官方微信
  • 关闭
  • 顶部
  • 您所在的位置 : 首页 > 新闻公告 > 利用css改变浏览器滚动条样式

    利用css改变浏览器滚动条样式

    注意:该方法只适用于 -webkit- 内核浏览器
    滚动条外观由两部分组成:

    1、滚动条整体滑轨

    2、滚动条滑轨内滑块

    在CSS中滚动条由3部分组成

    1

    2

    3

    4

    5

    name::-webkit-scrollbar //滚动条整体样式

     

    name::-webkit-scrollbar-track //滚动条滑轨

     

    name::-webkit-scrollbar-thumb //滚动条内部滑块

    注意:以上3个均为伪类,请将name更改为需要改变的元素名称

    例如:改变整体页面的滚动条样式

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    body::-webkit-scrollbar{ //先改变body的滚动条宽度

     

    width: 8px;

     

    }

     

    body::-webkit-scrollbar-track{//再改变body的滚动条轨道颜色

     

    background: rgb(200, 200, 200);

     

    border-radius: 5px;

     

    }

     

    body::-webkit-scrollbar-thumb{//最后改变body的滚动条滑轨相关的样式

     

    background: rgb(120, 120, 120);

     

    border-radius: 5px;

     

    }

    可在样式中添加背景、透明度,边框,圆角等属性,使浏览器更美观。

    纵横数据新上的美国站群服务器8C 现货
    限量特价 速定! cn2限量一人3台
    E5 16G 1T 8C 232IP   
    E5*2 32G 1T 8C 232IP
    E5*2 32G 2T 8C 232IP  
    E5*2 32G 3T 8C 232IP
    美国站群服务器 美国高防御服务器 欢迎在线客服 


    最新推荐


    微信公众帐号
    关注我们的微信