前端 页面自定义滚动条

Posted apeandcat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端 页面自定义滚动条相关的知识,希望对你有一定的参考价值。

示例
技术图片

代码

<div class="p-detail__table-scrollbar">
    <div style="width: 3300px;height: 10px;">
    </div>
</div>

<style>
.p-detail__table-scrollbar
    overflow-x: scroll;
    overflow-y: hidden;

.p-detail__table-scrollbar::-webkit-scrollbar
    width:1px;
    height: 10px;
    background-color: #ccc;
    border-radius: 5px;

.p-detail__table-scrollbar::-webkit-scrollbar-track
    border-radius: 5px;

.p-detail__table-scrollbar::-webkit-scrollbar-thumb
    border-radius: 5px;
    background-color: #333;

</style>

以上是关于前端 页面自定义滚动条的主要内容,如果未能解决你的问题,请参考以下文章

滚动条自定义

前端 页面自定义滚动条

Angular - 材质:进度条自定义颜色?

CSS3自定义滚动条样式 -webkit-scrollbar

自定义滚动条样式 --- 适用于webkit浏览器 Google Chrome 和 Opera

WPF之拖动项滚动条自滚动(当拖动项到达高度的边界时候滚动条自己可以上下滚动)