首页 > 软件开发 > HTML >

CSS怎么修改滚动条样式

来源:互联网 2023-03-16 19:16:45 版权归原作者所有,如有侵权,请联系我们

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

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

工具/原料

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

方法/步骤

  • 1

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

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

  • 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 4

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

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

  • 5

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

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

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

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

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

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

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

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

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

  • 方法总结:

  • 1

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

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

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

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

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

  • 注意事项

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

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


    标签: CSSHTML

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