这篇文章主要介绍如何配置H5的滚动条样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下: ::-WEBkit-scrollbar-track { &nb
这篇文章主要介绍如何配置H5的滚动条样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体如下:
::-WEBkit-scrollbar-track {
background-color: #b46868;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #7c2929;
}
::-webkit-scrollbar-corner {
background-color: black;
}
// IE 自己的设置方法,并且是第一个可以自定义滚动条的浏览器,从IE5.5开始兼容
body {
scrollbar-face-color: #b46868;
}
举例
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.some-element::webkit-scrollbar {
}
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
以上是“如何配置H5的滚动条样式”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网node.js频道!
--结束END--
本文标题: 如何配置H5的滚动条样式
本文链接: https://www.lsjlt.com/news/74237.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0