实现页面中漂亮的滚动条

好的东西，总会让人觉得赏心悦目。

很久之前，就发现某个大神的博客园有些自定义功能很溜，一直很想实现，但却只是想想，直到今早在翻掘金的时候，看见最新的一篇文章“不可思议的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;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。各取所需，各凭喜好。