實現頁面中漂亮的滾動條

好的東西，總會讓人以爲賞心悅目。

好久以前，就發現某個大神的博客園有些自定義功能很溜，一直很想實現，但卻只是想一想，直到今早在翻掘金的時候，看見最新的一篇文章「難以想象的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;width: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。各取所需，各憑喜愛。