移動端滾動事件

原理:

當開始一個touchstart事件的時候,獲取此刻手指的橫坐標startX和縱坐標startY;

當觸發(fā)touchmove事件時,在獲取此時手指的橫坐標moveEndX和縱坐標moveEndY;最后,通過這兩次獲取的坐標差值來判斷手指在手機屏幕上的滑動方向。

具體代碼如下:

$("body").on("touchstart",?function(e) {

????e.preventDefault();

????startX = e.originalEvent.changedTouches[0].pageX,

????startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove",?function(e) {

????e.preventDefault();

????moveEndX = e.originalEvent.changedTouches[0].pageX,

????moveEndY = e.originalEvent.changedTouches[0].pageY,

????X = moveEndX - startX,

????Y = moveEndY - startY;


????if?( X > 0 ) { alert("右滑");? }

????else?if?( X < 0 ) {? alert("左滑");? }

????else?if?( Y > 0) {? alert("下滑");? }

????else?if?( Y < 0 ) {? ?alert("上滑");? }

????else{? alert("just touch");? }

});

總結(jié):touchmove的最后坐標減去touchstart的起始坐標。

X的結(jié)果如果正數(shù),則說明手指是從左往右劃動;

X的結(jié)果如果負數(shù),則說明手指是從右往左劃動;

Y的結(jié)果如果正數(shù),則說明手指是從上往下劃動;

Y的結(jié)果如果負數(shù),則說明手指是從下往上劃動。

那么問題就來了……

在實際的操作中,手指的上下滑動很難做到直上直下,只要稍微有點斜,只要稍微有點斜,就會被X軸的判斷先行接管,而與我們實際的操作意愿相背離。此時就需要添加特殊的判斷技巧,代碼如下:

$("body").on("touchstart",?function(e) {

????e.preventDefault();

????startX = e.originalEvent.changedTouches[0].pageX,

????startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove",?function(e) {

????e.preventDefault();

????moveEndX = e.originalEvent.changedTouches[0].pageX,

????moveEndY = e.originalEvent.changedTouches[0].pageY,

????X = moveEndX - startX,

????Y = moveEndY - startY;


????if?( Math.abs(X) > Math.abs(Y) && X > 0 ) { alert("left 2 right"); }

????else?if?( Math.abs(X) > Math.abs(Y) && X < 0 ) { alert("right 2 left");? }

????else?if?( Math.abs(Y) > Math.abs(X) && Y > 0) { alert("top 2 bottom"); }

????else?if?( Math.abs(Y) > Math.abs(X) && Y < 0 ) { alert("bottom 2 top"); }

????else{ alert("just touch");? }

});

以上代碼,在測試時仍不能達到預期的效果,此時要注意到一個事實--$('body').height = 0(此處是個大坑,但有時也不會出現(xiàn),望大神指教)

故還應該在此基礎上添加一下代碼:

var?windowHeight = $(window).height(),

??????????$body = $("body");

??????// console.log($(window).height());

??????// console.log($('body').height());

??????$body.css("height", windowHeight);

?到此,已實現(xiàn)了手機移動端手指的上滑、下滑、左滑和右滑操作

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 今日工作不忙,想起之前在做移動端時,用到的touch事件,自己研究了好一陣子,看完這篇文章后,就豁然開朗啦,現(xiàn)在分...
    雨魚魚兒閱讀 672評論 0 2
  • 問題 ??我用官方例子中的Popup做了一個屬性查看面板。因為圖片需要水平滾動,在PC端瀏覽器通過鼠標拖動滑動條是...
    大洪閱讀 2,084評論 0 2
  • 話不多少,直接上代碼,請自測HTML: 腳本:
    MrAlexLee閱讀 354評論 0 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,157評論 0 2
  • 作為一個在小城里長大的女孩子,我特別向往田園牧歌般樸實的鄉(xiāng)村生活。最近真正讀了沈從文先生的《邊城》,他筆下那...
    長街52閱讀 363評論 0 1

友情鏈接更多精彩內(nèi)容