如何用JavaScript实现网页竖向滚动条功能？
摘要：设计目标：希望复刻浏览器原生竖向滚动条的功能，并且能做一些个性化配置 测试页面： 1 <!DOCTYPE html> 2 <html lang="e
设计目标：希望复刻浏览器原生竖向滚动条的功能，并且能做一些个性化配置
测试页面：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="MyScrolly.js"></script>
7 </head>
8 <body>
9 <div id="div_allbase" style="width: 800px;height: 600px;background-color: beige;overflow-y: hidden">
10 <div id="div_outer" style="width: 700px;height: 500px;background-color: cornflowerblue;overflow-y: auto">
11 <div id="div_inner1" style="width: 600px;height: 300px;background-color: darkseagreen">
12 111111111111111111111111111111111111111111111111111111111111111
13 </div>
14 <div id="div_inner2" style="width: 600px;height: 300px;margin-top: 50px;background-color: darkseagreen"">
15 222222222222222222222222222222222222222222222222222222222222222
16 </div>
17 <div id="div_inner3" style="width: 600px;height: 300px;margin-top: 50px;background-color: darkseagreen"">
18 333333333333333333333333333333333333333333333333333333333333333
19 </div>
20 </div>
21 </div>
22 </body>
23 <script>
24 var myScroll=new MyScrolly(document.getElementById("div_outer")//要添加滚动条的元素
25 ,{parentelem:document.getElementById("div_allbase")})//配置参数
26 myScroll.func_count(myScroll);//在innerHTML发生变化或onresize之后重新计算dragbar的长度
//使用这种方式可以为页面中的多个元素配置不同的滚动条样式
27 </script>
28 </html>
代码实现：
1 function MyScrolly(elem,obj_p)
2 {
3 if(elem)
4 {
5 obj_p=obj_p||{};
6 this.elem=elem;
7 this.func_render=obj_p.func_render||MyScrolly.defaultRender;//滚动条的dom结构
8 this.func_count=obj_p.func_count||MyScrolly.countChildren;//在页面发生变化时滚动条的变化方式
9 this.func_render(elem,this);
10 this.parentelem=obj_p.parentelem||elem;//支持拖拽、释放、禁止选择等动作的外围元素范围，默认设置为document可能效果更好
11 //this.clientY0=this.elem.clientY;//没有用到