/*隐藏bady滚动条*/
*::-webkit-scrollbar {
display: none;
}
<div class="p2-content search-box">
//内容盒子 有宽有高 y轴滚动
<div class="content-box" id="search-box-content">
//内容部分
<img class="p2-search-input" data-src="img/p2-search-input.png?v=6" />
</div>
// 自制滚动条
<div class="scallbar-box">
<img class="scallbar" src="img/scallbar.jpg" />
</div>
</div>
gundong($('#search-box-content'))
function gundong(ele){
//计算滚动条高度 滚动距离总长(注意不是滚动条的长度)
var g = ele[0].scrollHeight;
// 盒子本身高度 + 滚动到的当前位置
var m = ele.height()+ele[0].scrollTop;
// 计算百分比
var h = m/g*100
var scallbar = $(ele.parent().find('.scallbar'))
scallbar.css('height', h + '%')
scallbar.css('top', h + '%')
ele.scroll(function () {
m = ele.height()+ele[0].scrollTop;
scallbar.css('top', m/g*100 + '%')
})
}