html5移动端拖动惯性 -尊龙游戏旗舰厅官网

下面代码只是实现了上下滑动惯性，没有写水平滑动惯性。（临时代码笔记，可能会在以后的过程中不断更新优化代码）

/*** 惯性原理:* 产生的速度 = 移动距离 / 移动时间* 距离 = 松开的坐标 - 上次的坐标 (距离差)* 时间 = 松开的时间 - 按下的时间 (时间差)* */var dargfun = {dargdom:null, //惯性滑动的dom区域startx:0, //开始偏移的xstarty:0, //开始偏移的yclientx:0, clienty:0,translatex:0, //保存的x偏移translatey:0, //保存的y偏移maxwidth:0, //滑动的最大宽度maxheight:0, //滑动的最大高度starttime:0, //记录初始按下时间init:function(config){this.dargdom = document.queryselector(config.dargdom);this.maxwidth = this.dargdom.offsetwidth;this.maxheight = this.dargdom.offsetheight;this.dargdom.addeventlistener('touchstart',(event)=>{event.stoppropagation(); //停止事件传播this.clientx = event.changedtouches[0].clientx;this.clienty = event.changedtouches[0].clienty;this.dargdom.style.webkittransition = this.dargdom.style.transition = '';this.startx = this.translatex;this.starty = this.translatey;this.starttime = date.now();},false);this.dargdom.addeventlistener('touchmove',(event)=>{if(document.documentelement.scrolltop >= this.dargdom.scrollheight - this.dargdom.clientheight){}else{return;}event.stoppropagation(); //停止事件传播this.translatex = event.changedtouches[0].clientx - this.clientx this.startx;this.translatey = event.changedtouches[0].clienty - this.clienty this.starty;if(this.translatey > 0 ){ //拖动系数. 拉力的感觉this.translatey *= 0.4;}else if( this.translatey < -(this.dargdom.scrollheight - this.dargdom.clientheight)){ this.translatey = (event.changedtouches[0].clienty - this.clienty) * 0.4 this.starty;}this.animate(this.translatey);},false);this.dargdom.addeventlistener('touchend',(event)=>{event.stoppropagation(); //停止事件传播var distancey = event.changedtouches[0].clienty - this.clienty,timedis = date.now() - this.starttime, //时间差speed = (distancey / timedis) * 100;// 惯性this.translatey = speed;this.translatey = 0;// 添加贝塞尔曲线this.dargdom.style.webkittransition = this.dargdom.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';this.animate(this.translatey);},false);},animate:function(y){this.dargdom.style.webkittransform = this.dargdom.style.transform = 'translatey(' y 'px)';} }export default dargfun;

注：当滑动到页面底部的时候才触发touchmove事件。

调用方式：

dragfun.init({dargdom:'#contractcontanier' });

参考地址：

• 移动端拖动惯性
• 原生移动端滑动js

转载于:https://www.cnblogs.com/moqiutao/p/8529508.html

总结

以上是尊龙游戏旗舰厅官网为你收集整理的html5移动端拖动惯性的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。