100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 用css去自定义页面滚动条的样式(谷歌浏览器 PC端)

用css去自定义页面滚动条的样式(谷歌浏览器 PC端)

时间:2022-03-07 10:23:59

相关推荐

用css去自定义页面滚动条的样式(谷歌浏览器 PC端)

用css去自定义页面滚动条的样式(谷歌浏览器,PC端)

常用的自定义滚动条样式,只需要用到三个属性

1.::-webkit-scrollbar

2.::-webkit-scrollbar-track

3.::-webkit-scrollbar-thumb

1. ::-webkit-scrollbar这个属性代表滚动条的整体样式,设置这个之后才能去修改下面的两个属性

::-webkit-scrollbar {width: 6px;border-radius: 3px;}

2.::-webkit-scrollbar-track这个属性代表滚动条的底层样式(即背景)

::-webkit-scrollbar-track {background-color: rgba(0, 20, 26, .3);border-radius: 3px;}

3.::-webkit-scrollbar-thumb这个属性代表滚动条的跟随滚动的小方块

::-webkit-scrollbar-thumb {background-color: #0C85A7;border-radius: 3px;}

注意这个适用于谷歌浏览器,其他浏览器本人并未进行测试,有其他问题的小伙伴欢迎留言探讨

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。