CSS 隐藏滚动条 / 美化滚动条

CSS 隐藏滚动条 / 美化滚动条代码隐藏滚动条直接使用 hideScrollba 即可 hideScrollba webkit scrollbar display none ChromeSafari hideScrollba scrollbar width none firefox ms overflow style none IE10 overflow x hidden overflow y auto

代码

隐藏滚动条

直接使用 hideScrollbar 即可

.hideScrollbar::-webkit-scrollbar { 
    display: none; /* Chrome Safari */ } .hideScrollbar { 
    scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-x: hidden; overflow-y: auto; } 

美化滚动条

::-webkit-scrollbar { 
    width: 5px; /* 滚动条宽度 */ height: 10px; } ::-webkit-scrollbar-track { 
    width: 6px; background: rgba(#101f1c, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { 
    background-color: rgba(144, 147, 153, 0.5); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; transition: background-color 0.3s; cursor: pointer; } ::-webkit-scrollbar-thumb:hover { 
    background-color: rgba(144, 147, 153, 0.3); } 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/223462.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午2:09
下一篇 2026年3月17日 下午2:09


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号