JS+CSS实现自定义页面滚动条

效果图如下：

首先隐藏原生的滚动条（仅限chrome浏览器）

html::-webkit-scrollbar{
    display: none;
}

通过JS监听页面滚动

document.addEventListener("scroll", function(e) {
        var ev = e || window.event;
        var height = window.innerHeight - 50; //计算剩余高度
        var pointer = document.getElementById("pointer");
        var percents = window.scrollY/(document.body.offsetHeight-window.innerHeight);// 计算滑动百分比
        percents = percents>1?1:percents;//差额取整
        pointer.style["top"] = 10 + height * percents + "px";
        pointer.innerHTML=Math.round(percents*100) + "%";
    })

完整代码见：github地址