js 简易版滚动条实例(适用于移动端H5开发)

2024-02-18 01:03:04 247

滑动条

1111

2222

3333

4444

5555

6666

7777

8888

9999

0000

aaaa

bbbb

cccc

dddd

eeee

/** *Createdbyhechaoon2017/6/25. */ (function(){ /**添加window对象hScoll属性*/ window.hScoll={ buildScoll:function(el,options){ App.init(el,options); } } varApp={ /**初始化组件*/ init:function(el,option){ App.options=option; App.prevY=0; App.el=document.getElementById(el); App.scoll=this.el.children[0]; App.h=this.el.offsetHeight;//滑动范围高度 App.ch=this.el.scrollHeight;//内容的高度 if(parseFloat(this.h)<=parseFloat(this.ch)){ App.sdiv=document.createElement('div'); App.scollb=document.createElement('div'); App.sdiv.setAttribute('class','scrollbars'); App.scollb.setAttribute('class','scollb'); App.scollb.style.height=parseFloat(this.h)*parseFloat(this.h)/parseFloat(this.ch)+'px'; App.el.appendChild(this.sdiv); App.sdiv.appendChild(this.scollb); App.initevent(); } }, /**绑定事件*/ initevent:function(){ App.el.addEventListener('touchstart',App.touchstart,false); App.el.addEventListener('touchmove',App.touchmove,false); App.el.addEventListener('touchend',App.touchend,false); }, /**记录滑动初始位置*/ touchstart:function(e){ varpoint=App.getPoint(e); App.startY=point.pageY; }, /**手指移动时，滚动条滚动*/ touchmove:function(e){ e.preventDefault();//阻止默认行为 varpoint=App.getPoint(e); App.moveY=point.pageY; App.deltaY=App.startY-App.moveY; if((App.prevY-App.deltaY)<=0&&(App.prevY-App.deltaY)>=-(App.ch-App.h)){ App.domove(App.prevY-App.deltaY); } if(App.options.interactiveScrollbars){ App.domove2(App.prevY-App.deltaY); }else{ if((App.prevY-App.deltaY)<=0&&(App.prevY-App.deltaY)>=-(App.ch-App.h)){ App.domove2(App.prevY-App.deltaY); } } }, /**手指离开时，判断位置*/ touchend:function(e){ App.prevY=App.prevY-App.deltaY; if(App.prevY>=0){ App.prevY=0; App.domove(App.prevY,true); App.domove2(App.prevY,true); } if(App.prevY<=-(App.ch-App.h)){ App.prevY=-(App.ch-App.h); App.domove(App.prevY,true); App.domove2(App.prevY,true); } }, getPoint:function(e){ returne.touches?e.touches[0]:e; }, /**内容滑动*/ domove:function(y,t){ if(t){ App.scoll.setAttribute('style','transform:translate(0px,'+y+'px);transition:transform300msease'); }else{ App.scoll.setAttribute('style','transform:translate(0px,'+y+'px);transition:transform0msease'); } }, /**滚动条滑动*/ domove2:function(y,t){ if(t){ App.scollb.setAttribute('style','transform:translate(0px,'+-parseFloat(y)*parseFloat(App.h)/parseFloat(App.ch)+'px);transition:transform0msease;height:'+parseFloat(App.h)*parseFloat(App.h)/parseFloat(App.ch)+'px'+''); }else{ App.scollb.setAttribute('style','transform:translate(0px,'+-parseFloat(y)*parseFloat(App.h)/parseFloat(App.ch)+'px);transition:transform0msease;height:'+parseFloat(App.h)*parseFloat(App.h)/parseFloat(App.ch)+'px'+''); } } } })();

以上这篇js简易版滚动条实例(适用于移动端H5开发)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

js 简易版滚动条实例(适用于移动端H5开发)

热门推荐

随机推荐