!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>编程技术>【CSS 效果】滚动条样式修改

【CSS 效果】滚动条样式修改

如题,如何通过CSS 代码调整滚动条样式

答:使用 CSS 伪类选择器 ::-webkit-scrollbar 

PS:::-webkit-scrollbar 仅仅在支持WebKit的浏览器可以使用

【CSS 效果】滚动条样式修改

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
  • ::-webkit-scrollbar-track — 滚动条轨道
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分

【CSS 效果】滚动条样式修改

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

Demo地址:http://demo.quietguoguo.com/css/【CSS效果】滚动条样式修改.html

给TA打赏
共{{data.count}}人
人已打赏
编程技术

xshell连接本地虚拟机很慢解决方法(xshell6连接不上虚拟机)

2022-9-4 17:34:28

编程技术

【JS 插件】better-scroll.js — 移动端滚动插件[兼容PC]

2022-9-5 16:31:24

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 admin@s9h.cn 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索