实现页面中漂亮的滚动条

最新推荐文章于 2025-06-18 13:54:19 发布

weixin_30492047

最新推荐文章于 2025-06-18 13:54:19 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

文章标签： c#

原文链接：http://www.cnblogs.com/zhengyeye/p/10254305.html

本文介绍了一种使用JavaScript在博客中实现自定义滚动条进度显示的方法。通过创建并监听滚动事件，动态更新进度条的值，使得用户可以直观地看到阅读进度。此方法适用于希望提升用户体验的博客或网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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