JavaScript实现竖向滚动条的一种思路
设计目标：希望复刻浏览器原生竖向滚动条的功能，并且能做一些个性化配置
测试页面：
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;//没有用到 12 this.last_clientY=-1; 13 //elem.onload 14 var that=this; 15 //使用页面观察器观察dom变化！！<-兼容性如何？？<-html5,并且会导致this被替换为MutationObserver对象，并且不好控制调用条件 16 // var MutationObserver=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver; 17 // //var mo=new MutationObserver(that.countChildren); 18 // var mo=new MutationObserver(function(records){ 19 // that.func_count(that); 20 // }); 21 // this.mo=mo; 22 // var option={ 23 // childList:true, 24 // subtree:true, 25 // } 26 //mo.observe(this.elem,option); 27 28 this.div2.onpointerdown=function (event) {//按下scrollbar 29 that.picked=true; 30 that.last_clientY=event.clientY;//取相对定位的参考点 31 that.parentelem.onselectstart=function(event){//防止在上下滑动时选中div中的文本 32 event.returnValue=false; 33 return false; 34 } 35 } 36 this.parentelem.onpointerup=function (event) { 37 that.picked=false; 38 that.parentelem.onselectstart=null; 39 //that.parentelem.onmousewheel=null; 40 } 41 this.parentelem.onpointerleave=function (event) { 42 that.picked=false; 43 that.parentelem.onselectstart=null; 44 that.parentelem.onmousewheel=null; 45 } 46 this.parentelem.onpointermove=function (event) {//拖动效果在div_allbase范围内均有效 47 if(that.picked==true&&(that.last_clientY>=0)) 48 { 49 //event.preventDefault();//阻止默认的行为发生 50 51 var int_clientY=event.clientY-that.last_clientY;//因为比较难定位elem的初始位置（也许elem自身会发生移动或变形），这里使用相对变化量 52 that.last_clientY=event.clientY; 53 var top_div2=parseInt(that.div2.style.top);//滑块上端到滑轨上端的距离，关于div2等属性的含义见defaultRender方法 54 var int1=top_div2+int_clientY; 55 if((that.outer_height-that.height_scrollbar)<int1) 56 {//如果过于靠下 57 int1=that.outer_height-that.height_scrollbar 58 } 59 if(int1<0) 60 {//如果过于靠上 61 int1=0 62 } 63 64 // if((that.outer_height-that.height_scrollbar)>=(top_div2+int_clientY)&&((top_div2+int_clientY)>=0)) 65 // { 66 that.div2.style.top=int1+"px";//移动滑块 67 var int2=(int1)/(that.outer_height/that.inner_height) 68 that.elem.scrollTop=int2;//滚动元素内容 69 that.div1.style.top=int2+"px";//移动滑轨 70 //console.log(that.elem.scrollTop); 71 // } 72 73 74 } 75 } 76 //this.parentelem.onclick=function(event){ 77 this.parentelem.onmouseenter=function(event){//鼠标滚轮，这里没有兼容火狐 78 that.parentelem.onmousewheel=function(event){ 79 if(that.last_clientY<0) 80 { 81 that.last_clientY=0; 82 } 83 if((that.last_clientY>=0)) 84 { 85 var int_clientY=-event.wheelDelta; 86 var top_div2=parseInt(that.div2.style.top); 87 var int1=top_div2+int_clientY; 88 if((that.outer_height-that.height_scrollbar)<int1) 89 { 90 int1=that.outer_height-that.height_scrollbar 91 } 92 if(int1<0) 93 { 94 int1=0 95 } 96 97 that.div2.style.top=int1+"px"; 98 var int2=(int1)/(that.outer_height/that.inner_height) 99 that.elem.scrollTop=int2; 100 that.div1.style.top=int2+"px"; 101 //console.log(that.elem.scrollTop); 102 103 } 104 } 105 } 106 107 } 108 else { 109 return false; 110 } 111 112 113 } 114 //MyScrolly.prototype 115 //计算容器内部组件的实际高度,并就此调整滚动条显示效果 116 //MyScrolly.prototype.countChildren=function(records){ 117 MyScrolly.countChildren=function(that){ 118 //this=that; 119 var arr=that.elem.childNodes;//如果使用MutationObserver，则这里的this是MutationObserver对象！！ 120 var len=arr.length; 121 var sum_height=0; 122 // for(var i=0;i<len;i++)//假设除了滚动条之外的所有元素都是纵向排列的！！《-这里需要递归排列！！？？ 123 // {累加元素内部children的高度 124 // var obj=arr[i]; 125 // if(obj.className!="div_myscroll1") 126 // { 127 // var int=obj.offsetHeight; 128 // if(int)//有些textnode的高度可能是undefined！！ 129 // { 130 // sum_height+=int; 131 // } 132 // 133 // } 134 // } 135 //考虑到margin，换一种测量思路 136 for(var i=len-1;i>0;i--) 137 { 138 var obj=arr[i]; 139 if(obj.className!="div_myscroll1") 140 { 141 var int=obj.offsetHeight; 142 if(int)//有些textnode的高度可能是undefined！！ 143 { 144 sum_height+=int; 145 sum_height+=obj.offsetTop; 146 break; 147 } 148 149 } 150 } 151 that.inner_height=sum_height;//元素内容高度 152 that.outer_height=that.elem.offsetHeight;//元素本身高度 153 console.log("重新测量高度"+that.outer_height+"/"+that.inner_height); 154 that.div2.style.top="0px";//滑块复位 155 that.elem.scrollTop=0; 156 that.clientY0=0; 157 that.picked=false; 158 that.last_clientY=-1;//这里还应该加上取消监听的代码 159 if(that.inner_height<=that.outer_height)//如果不需要显示滚动条 160 { 161 that.div1.style.display="none"; 162 } 163 else { 164 that.div1.style.display="block"; 165 var int=that.outer_height*(that.outer_height/that.inner_height); 166 that.height_scrollbar=int; 167 that.div2.style.height=int+"px"; 168 } 169 } 170 //默认的滚动条样式，也可以在这里使用图片等自定义样式 171 MyScrolly.defaultRender=function(elem,that) 172 { 173 elem.style.position="relative"; 174 elem.style.overflowX="hidden"; 175 elem.style.overflowY="hidden";//取消浏览器自带的滚动条 176 var div1=document.createElement("div");//滑轨 177 div1.className="div_myscroll1"; 178 div1.style.width="10px"; 179 div1.style.backgroundColor="rgb(245,245,245)"; 180 div1.style.position="absolute"; 181 div1.style.right="0px"; 182 div1.style.top="0px"; 183 div1.style.height="100%"; 184 div1.style.zIndex=elem.style.zIndex+10; 185 div1.style.display="none"; 186 that.div1=div1; 187 var div2=document.createElement("div");//滑块 188 div2.className="div_myscroll2"; 189 div2.style.width="10px"; 190 div2.style.backgroundColor="rgb(226,226,226)"; 191 div2.style.position="absolute"; 192 div2.style.right="0px"; 193 div2.style.top="0px"; 194 //div1.style.height="100%"; 195 div2.style.zIndex=elem.style.zIndex+20; 196 that.div2=div2; 197 div1.appendChild(div2); 198 elem.appendChild(div1); 199 }
20201113补充，在实际使用中发现三个问题：
一、如果容器中包含img标签，则需要等待所有img标签加载完毕后计算内容高度，否则img标签高度只会表示为24px（Chrome下的默认加载图标高度），建议为每个img标签设置onload和onerror监听，搭配记录总img数量的计数器确保所有img标签加载完毕后计算内容高度。（为标签设置innerHTML后即可用getElement计算img标签个数）
二、如果将滑轨和容器内容放在同一层次，则需要注意在用innerHTML=""清空容器内容时也会将滚动条一起清理掉，需要在内容填充完毕后重绘滚动条。特别的，如果容器中的标签是否换行受到滑轨宽度影响，则计算内容offsetHeight值时会丢失换行增加的部分，最终导致算出的滚动长度小于真实内容长度，故此建议将变化的内容放在一个尺寸随内容变化的内部容器中，然后让这个内部容器与滑轨平级。
三、在实际使用时发现将parentElem设为document时，虽然事件能够触发响应，但并没有实现预期的滚动效果，替换为外围其他标签后正常，时间有限没有深入研究。
