用css修改默认滚动条样式的方法-创新互联
这篇文章主要为大家详细介绍了用css修改默认滚动条样式的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
站在用户的角度思考问题,与客户深入沟通,找到如皋网站设计与如皋网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟主机、企业邮箱。业务覆盖如皋地区。前言:
很多项目都需要改变滚动条的默认样式,并不想单独下载和引入插件。
修改方法:
&::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #191a37; height: 14px; } &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { border-radius: 999px; width: 20px; border: 5px solid transparent; } &::-webkit-scrollbar-track { box-shadow: 1px 1px 5px #191a37 inset; } &::-webkit-scrollbar-thumb { //滚动条的滑块样式修改 width: 20px; min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px #464f70 inset; } &::-webkit-scrollbar-corner { background: #191a37; }
精简代码:
&::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } &:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4); } &:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1); }
这个的优点在于鼠标移上才会显示修改的滚动条。
隐藏某轴的滚动条代码写法:
overflow-x:hidden;
以上就是用css修改默认滚动条样式的方法做了简略的介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联网站制作公司行业资讯频道哦!
标题名称:用css修改默认滚动条样式的方法-创新互联
当前链接:http://scyanting.com/article/dppedi.html