首页 > 软件开发 > HTML >

CSS怎么修改滚动条样式

来源:互联网 2023-03-16 19:16:45 373

很多做网站开发的小伙伴,为了体现网页的个性化美观,想自定义修改滚动条的样式。但是不知道怎么操作,下面小编就给你安排!5mL办公区 - 实用经验教程分享!

CSS怎么修改滚动条样式5mL办公区 - 实用经验教程分享!

工具/原料

  • 电脑:win7,64位
  • 开发工具:HBuilder X

方法/步骤

  • 1

    打开网页开发工具,新建一个HTML文件5mL办公区 - 实用经验教程分享!

    CSS怎么修改滚动条样式5mL办公区 - 实用经验教程分享!

  • 2

    添加填充内容让页面出现滚动条(这一步是为了方便给大家演示!)5mL办公区 - 实用经验教程分享!

    CSS怎么修改滚动条样式5mL办公区 - 实用经验教程分享!

  • 2该信息未经授权抓取自百度经验
  • 3

    编写滚动条样式:5mL办公区 - 实用经验教程分享!

    body::-webkit-scrollbar{5mL办公区 - 实用经验教程分享!

    width:10px;5mL办公区 - 实用经验教程分享!

    }5mL办公区 - 实用经验教程分享!

    body::-webkit-scrollbar-track{5mL办公区 - 实用经验教程分享!

    background: #999;5mL办公区 - 实用经验教程分享!

    border-radius:2px;5mL办公区 - 实用经验教程分享!

    }5mL办公区 - 实用经验教程分享!

    body::-webkit-scrollbar-thumb{5mL办公区 - 实用经验教程分享!

    background: red;5mL办公区 - 实用经验教程分享!

    border-radius:10px;5mL办公区 - 实用经验教程分享!

    }5mL办公区 - 实用经验教程分享!

    body::-webkit-scrollbar-thumb:hover{5mL办公区 - 实用经验教程分享!

    background: #333;5mL办公区 - 实用经验教程分享!

    }5mL办公区 - 实用经验教程分享!

    body::-webkit-scrollbar-corner{5mL办公区 - 实用经验教程分享!

    background: #179a16;5mL办公区 - 实用经验教程分享!

    }5mL办公区 - 实用经验教程分享!

    CSS怎么修改滚动条样式5mL办公区 - 实用经验教程分享!

  • 4

    打开浏览器预览效果:5mL办公区 - 实用经验教程分享!

    CSS怎么修改滚动条样式5mL办公区 - 实用经验教程分享!

  • 5

    滚动条参数说明:5mL办公区 - 实用经验教程分享!

    ::-webkit-scrollbar5mL办公区 - 实用经验教程分享!

    ::-webkit-scrollbar-thumb5mL办公区 - 实用经验教程分享!

    ::-webkit-scrollbar-track5mL办公区 - 实用经验教程分享!

    ::-webkit-scrollbar-button5mL办公区 - 实用经验教程分享!

    ::-webkit-scrollbar-track-piece5mL办公区 - 实用经验教程分享!

    ::-webkit-scrollbar-corner5mL办公区 - 实用经验教程分享!

    ::-webkit-resizer5mL办公区 - 实用经验教程分享!

    CSS怎么修改滚动条样式5mL办公区 - 实用经验教程分享!

  • 方法总结:

  • 1

    1、新建一个HTML文件5mL办公区 - 实用经验教程分享!

    2、添加填充内容,让页面出现滚动条5mL办公区 - 实用经验教程分享!

    3、添加滚动条样式5mL办公区 - 实用经验教程分享!

    4、预览效果5mL办公区 - 实用经验教程分享!

    5、查看参数说明5mL办公区 - 实用经验教程分享!

  • 注意事项

    • tips1:本教程所设置的参数样式都是为了方便给大家演示,可根据自己的需求修改!
    • tips2:如果你想给DIV添加滚动条样式只需把body改成DIV即可!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!5mL办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码