自定义滚动条

var scroll = 0;
$(".tel").click(function () {
    if ($(this).hasClass("open")) {
        $(this).removeClass("open")
        $(".drop-down").animate({
            height: 0,
            opacity: 0
        }, 200)
    } else {
        $(this).addClass("open")
        $(".drop-down").animate({
            height: 200,
            opacity: 1
        }, 200);
        $(".scroll-bar").css({
            height: (200 / $(".scroll-content").height() * 200).toFixed(),
            opacity: 0
        })
        //计算滑块高度；公式：下拉框高度除以实际滚动内容的高度得到两个元素间的高度比率，然后下拉框的实际高度乘以比率得到滚动条高度
        scroll = (200 / $(".scroll-content").height() * 200).toFixed();
    }
})
$(".drop-down>li").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
    $(".tel").removeClass("open")
    $(".drop-down").animate({
        height: 0,
        opacity: 0
    }, 200);
})
$(".scroll-box").scroll(function () {
    //计算滚动条的top值；公式：滚出内容的高度(scrollTop)除以需要滚动内容的整体高度，得到滚出高度和整体高度之间的比率；然后用比率乘以下拉框的整体高得到top值
    var top = ((this.scrollTop / $(".scroll-content").height()) * 198).toFixed()
    if (scroll < 17) {
        //计算误差值；因为当滚动条保持最小高度时，计算出的top值和实际情况会有误差；公式：用限制的最小高度减去计算出的滚动条高度得到超出高度；然后用超出高度除以下拉框高得到超出高度占据下拉框高度的百分比，再用百分比乘以正常top值得到滚动条在当前位置的误差值；最后用正常top值减去误差值得到当滚动条保持最小高度时需要设置的top值
        top = top - ((17 - scroll) / 200 * top).toFixed()
    }
    $(".scroll-bar").css("top", parseInt(top) + "px")
})