分享

JavaScript实现竖向滚动条的一种思路

 头号码甲 2021-09-07

设计目标:希望复刻浏览器原生竖向滚动条的功能,并且能做一些个性化配置

测试页面:

 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时,虽然事件能够触发响应,但并没有实现预期的滚动效果,替换为外围其他标签后正常,时间有限没有深入研究。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多