实现页面中漂亮的滚动条

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

很久之前，就发现某个大神的博客园有些自定义功能很溜，一直很想实现，但却只是想想，直到今早在翻掘金的时候，看见最新的一篇文章“不可思议的CSS滚动条”，这才突然想起来被自己遗忘的这件事。于是再返回到博客园，找到那个大神的博客：https://www.cnblogs.com/xiaohuochai/，再提笔记录下使用JS实现的思路：

1.效果：

2.过程：

①自定义js文件，创建底部滚动条所在的元素：

比如我的cnblogscontent.js：

 1 //事件处理程序兼容写法
 2 function addEvent(target,type,handler){
 3     if(target.addEventListener){
 4         target.addEventListener(type,handler,false);
 5     }else{
 6         target.attachEvent('on'+type,function(event){
 7             return handler.call(target,event);
 8         });
 9     }
10 }
11 
12 (function(){
13     //生成元素
14     var progress = document.createElement('progress');
15     var cnblogs_post_body =  document.getElementById('cnblogs_post_body');
16     progress.id = 'progress';
17     progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;100%;height:12px;text-align:center;font:12px/12px "宋体";';
18     document.body.appendChild(progress);
19 
20     //计算H
21     var H;
22 
23     addEvent(window,'load',function(){
24         progress.max = H = cnblogs_post_body.scrollHeight
25     });
26     
27     
28     //计算h及radio
29     addEvent(window,'scroll',function(){
30         var h = document.documentElement.scrollTop || document.body.scrollTop;
31         progress.value =  h;
32         var radio = (h/H >= 1) ? 1 : h/H;
33         progress.innerHTML = progress.title =  Math.floor(100*radio) + '%';    
34     });    
35 })();

②在博客园-设置-页脚Html代码（这个位置自己看准合适的地方放进去就ok，前提是需要将此js文件上传至文件服务器上，拿到下载地址）；

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

划重点：

其实以上两种方式均能实现图片中的效果，只是不同的实现方式，一种纯js，一种纯css。各取所需，各凭喜好。