自定義滾動條

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")
})