欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > css >内容正文

css

css3自定义滚动条样式 -ag凯发k8国际

发布时间:2024/10/12 css 36 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 css3自定义滚动条样式 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

效果图:

html:

<div class="box"><div class="transcrided_text"></div> </div>

css:

.transcrided_text {margin: 0 0.5rem;font-size: 0.14rem;padding-bottom: 0.2rem;height: 1.62rem;overflow-y: scroll; }/*主要部分 -- 自定义样式*/ /*滚动条整体样式*/ .transcrided_text::-webkit-scrollbar {width: 6px;height: 1px; } /*滚动条滑块*/ .transcrided_text::-webkit-scrollbar-thumb {border-radius: 6px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #bebebe; } /*滚动条轨道*/ .transcrided_text::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);border-radius: 6px;background: #ededed; }

兼容性:

chrome可以显示;火狐、ie会变成默认样式。360用的chrome的内核,360也可以使用。

总结

以上是ag凯发k8国际为你收集整理的css3自定义滚动条样式的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

网站地图