實現頁面中漂亮的滾動條

好的東西，總會讓人覺得賞心悅目。

很久之前，就發現某個大神的博客園有些自定義功能很溜，一直很想實現，但卻只是想想，直到今早在翻掘金的時候，看見最新的一篇文章“不可思議的CSS滾動條”，這才突然想起來被自己遺忘的這件事。於是再返回到博客園，找到那個大神的博客：https://www.cnblogs.com/xiaohuochai/，再提筆記錄下使用JS實現的思路：

1.效果：

2.過程：

①自定義js文件，創建底部滾動條所在的元素：

比如我的cnblogscontent.js：

//事件處理程序兼容寫法
function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent('on'+type,function(event){
            return handler.call(target,event);
        });
    }
}

(function(){
    //生成元素
    var progress = document.createElement('progress');
    var cnblogs_post_body =  document.getElementById('cnblogs_post_body');
    progress.id = 'progress';
    progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:12px;text-align:center;font:12px/12px "宋體";';
    document.body.appendChild(progress);

    //計算H
    var H;

    addEvent(window,'load',function(){
        progress.max = H = cnblogs_post_body.scrollHeight
    });
    
    
    //計算h及radio
    addEvent(window,'scroll',function(){
        var h = document.documentElement.scrollTop || document.body.scrollTop;
        progress.value =  h;
        var radio = (h/H >= 1) ? 1 : h/H;
        progress.innerHTML = progress.title =  Math.floor(100*radio) + '%';    
    });    
})();

②在博客園-設置-頁腳Html代碼（這個位置自己看准合適的地方放進去就ok，前提是需要將此js文件上傳至文件服務器上，拿到下載地址）；

3.於是便看到了最初gif中的效果。

划重點：

其實以上兩種方式均能實現圖片中的效果，只是不同的實現方式，一種純js，一種純css。各取所需，各憑喜好。