下面代碼只是實現了上下滑動慣性，沒有寫水平滑動慣性。（臨時代碼筆記，可能會在以后的過程中不斷更新優化代碼）

/*** 慣性原理:* 產生的速度 = 移動距離 / 移動時間* 距離 = 松開的坐標 - 上次的坐標 (距離差)* 時間 = 松開的時間 - 按下的時間 (時間差)* */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移动端拖动惯性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。