這篇文章主要介紹了原生js如何實(shí)現(xiàn)移動(dòng)端Touch滑動(dòng)反彈效果，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專(zhuān)注于霞山企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。霞山網(wǎng)站建設(shè)公司,為霞山等地區(qū)提供建站服務(wù)。全流程按需策劃，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

移動(dòng)端 Touch 滑動(dòng)反彈

什么是Touch滑動(dòng)？就是類(lèi)似于PC端的滾動(dòng)事件，但是在移動(dòng)端是沒(méi)有滾動(dòng)事件的，所以就要用到Touch事件結(jié)合js去實(shí)現(xiàn)，效果如下：

1. 準(zhǔn)備工作

什么是移動(dòng)端的Touch事件？在移動(dòng)端Touch事件可以細(xì)分成三種，分別是：touchstart、touchmove和touchend，并且touch事件必須要用addEventListener去監(jiān)聽(tīng)。

touchStart當(dāng)手指觸碰到屏幕的時(shí)候觸發(fā)

touchmove當(dāng)手指在屏幕上不斷移動(dòng)的時(shí)候觸發(fā)

touchend當(dāng)手指離開(kāi)屏幕的時(shí)候觸發(fā)

Touch 事件觸發(fā)的 Event 對(duì)象：

// 手指觸碰到屏幕時(shí)觸發(fā)
element.addEventListener('touchstart', function (e) {
    // 打印的事件對(duì)象
    console.log(e);
})

changedTouches、targetTouches、touches都是偽數(shù)組，里面裝的是手指列表

三種返回對(duì)象的區(qū)別：

其實(shí)這三種返回的對(duì)象，都是表示用戶(hù)觸摸事件時(shí)的手指信息，之所以是一個(gè)偽數(shù)組，是因?yàn)橛锌赡艹霈F(xiàn)多指同時(shí)觸摸，但是在實(shí)際工作中一般不去考慮多指的情況。而它們唯一的區(qū)別就是在touchstart和touchmove事件的時(shí)候，changedTouches、targetTouches、touches都能獲取到手指的信息，但是在touchend事件的時(shí)候，targetTouches、touches對(duì)象是不能返回離開(kāi)屏幕時(shí)的手指信息，只有changedTouches對(duì)象能返回。

有哪些手指信息？

我們可以看下上面的圖片，在changedTouche[0]中，有些值：

clientX:74    // 觸摸點(diǎn)相對(duì)于瀏覽器的 viewport 左邊緣的 x 坐標(biāo)，不會(huì)包括左邊的滾動(dòng)距離。
clientY:73    // 觸摸點(diǎn)相對(duì)于瀏覽器的 viewport 上邊緣的 Y 坐標(biāo)，不會(huì)包括上邊的滾動(dòng)距離。
screenX:2202  // 觸摸點(diǎn)相對(duì)于屏幕左邊緣的 x 坐標(biāo)。
screenY:327   // 觸摸點(diǎn)相對(duì)于屏幕上邊緣的 Y 坐標(biāo)。
pageX:65      // 觸摸點(diǎn)相對(duì)于 document 的左邊緣的 x 坐標(biāo)，包括左邊的滾動(dòng)距離
pageY:18      // 觸摸點(diǎn)相對(duì)于 document 的上邊緣的 Y 坐標(biāo)，包括左邊的滾動(dòng)距離

2. 基本結(jié)構(gòu)

HTML部分：

<aside class="main">
  <div class="draw" id="draw">
    <ul>
      <li style="background:orange">列表一</li>
      <li style="background:yellowgreen">列表二</li>
      <li style="background:yellow">列表三</li>
      <li style="background:cyan">列表四</li>
      <li style="background:orangered">列表五</li>
      <li style="background:pink">列表六</li>
      <li style="background:red">列表七</li>
      <li style="background:purple">列表八</li>
      <li style="background:violet">列表九</li>
      <li style="background:brown">列表十</li>
    </ul>
  </div>
</aside>

css部分：

在列表的父盒子上設(shè)定一個(gè)overflow: hidden屬性，使超出盒子部分的列表暫時(shí)隱藏掉，后面會(huì)通過(guò)js去實(shí)現(xiàn)滑動(dòng)。

/* 樣式初始化 */
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;

}

aside {
  height: 100%;
  width: 100%;
}
/* 列表的父盒子，限制寬高 */
/* 注意設(shè)置overflow: hidden;樣式后，超出這個(gè)盒子的ul將不會(huì)顯示 */
.draw {
  width: 60px;
  height: 500px;
  border: 2px solid #ccc;
  overflow: hidden;
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* li 設(shè)置了浮動(dòng)， 所以 ul 要清除浮動(dòng) */
ul:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}

ul {
  zoom: 1;
}

li {
  list-style: none;
  float: left;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

效果圖：

3. 首次滑動(dòng)

手指觸摸到列表向下滑動(dòng)的時(shí)候，列表應(yīng)該跟著向下滑動(dòng)，當(dāng)手指離開(kāi)屏幕的時(shí)候，列表應(yīng)該停在滑動(dòng)的位置。這里就會(huì)用到上面準(zhǔn)備階段的知識(shí)點(diǎn)了，不明白的可以參考上面的概念。

實(shí)現(xiàn)原理：

1、touchstart的時(shí)候，獲取手指觸摸的落點(diǎn)A，通過(guò)這個(gè)點(diǎn)對(duì)象里面的clientY屬性，獲取距離頂部可視區(qū)的距離；

2、touchmove的時(shí)候，獲取手指的點(diǎn)B，同樣的獲取移動(dòng)時(shí)距離頂部可視區(qū)的距離；

3、touchmove的時(shí)候，還要做另一件事情，就是獲取兩點(diǎn)的差值（B.clientY-A.clientY），將這個(gè)差值動(dòng)態(tài)賦值給ul，ul只需要設(shè)置向Y軸方向偏移這個(gè)距離，就能實(shí)現(xiàn)列表隨手指滑動(dòng)

先來(lái)張示意圖，怎么通過(guò) js 讓列表滑動(dòng)起來(lái)：

示例代碼：

var draw = document.querySelector('#draw');
var ul = draw.children[0];

// touchstart 時(shí)，記錄手指在 Y 軸上的落點(diǎn)距離可視頂部距離
var startY = 0
ul.addEventListener('touchstart', function (e) {
  startY = e.changedTouches[0].clientY;
})
// touchmove 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchmove', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;
  // 設(shè)置 ul 在 Y 軸上的偏移
  ul.style.transform = 'translateY(' + dy + 'px)';
})

效果圖：

4. 再次滑動(dòng)

上面的效果圖，細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)了問(wèn)題，在第一次的時(shí)候，得到了我們想要的效果，但是在第二次的時(shí)候，我們繼續(xù)向下移動(dòng)了一段距離，但是ul并沒(méi)有接著第一次的位置繼續(xù)向下，而是瞬間跳了上去。

問(wèn)題分析：

雖然第二次是繼續(xù)向下移動(dòng)了一段距離，但是觸摸結(jié)束后，最終是將此時(shí)的差值，重新賦值給了ul的Y軸偏移，所以視覺(jué)上“跳了上去”。

解決方法：

每一次滑動(dòng)結(jié)束之后，都應(yīng)該記錄下此次滑動(dòng)的距離，與之前的進(jìn)行累加，待下一次滑動(dòng)的時(shí)候，ul在Y軸的偏移值應(yīng)該是之前的距離加上本次滑動(dòng)的距離。

新增touchend事件，在該事件里同樣的可以獲取到本次滑動(dòng)的距離，將它與上一次的距離相加，賦值給一個(gè)全局變量；

在touchmove事件里有點(diǎn)小改動(dòng)，就是在給ul設(shè)置偏移值的時(shí)候，除了本次滑動(dòng)的差值還要加上這個(gè)上一次的值；

示意圖：

示例代碼：

var draw = document.querySelector('#draw');
var ul = draw.children[0];

var startY = 0 // 剛觸碰到屏幕的時(shí)的手指信息
var centerY = 0 // 用來(lái)記錄每次觸摸時(shí)上一次的偏移距離

// touchstart 時(shí)，記錄手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchstart', function (e) {
  startY = e.changedTouches[0].clientY;
})

// touchmove 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchmove', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;
  // 上次的滑動(dòng)距離加上本次的滑動(dòng)距離
  var tempY = centerY + dy;
  // 設(shè)置 ul 在 Y 軸上的偏移
  ul.style.transform = 'translateY(' + tempY + 'px)';
})

// touchend 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchend', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;
  // 記錄移動(dòng)的距離
  centerY = centerY + dy;
})

效果圖：

5. 限制滑動(dòng)區(qū)間

限制向下滑動(dòng)最大區(qū)間：

設(shè)定向下最大區(qū)間的值比較簡(jiǎn)單，直接設(shè)定一個(gè)值，當(dāng)上一次滑動(dòng)的距離加上本次滑動(dòng)的距離大于這個(gè)值的時(shí)候，就不讓它再繼續(xù)往下滑了，讓他直接等于這個(gè)設(shè)定的值。

示例代碼：

var maxDown = 50; // 設(shè)定一個(gè)最大向下滑動(dòng)的距離

// touchmove 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchmove', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;

  // 上次的滑動(dòng)距離加上本次的滑動(dòng)距離
  var tempY = centerY + dy;

  // 當(dāng)上次滑動(dòng)的距離加上本次滑動(dòng)的距離 大于 設(shè)定的最大向下距離的時(shí)候
  if (tempY > maxDown) {
    // 直接讓偏移的值 等于這個(gè)設(shè)定值
    tempY = maxDown;
  }

  // 設(shè)置 ul 在 Y 軸上的偏移
  ul.style.transform = 'translateY(' + tempY + 'px)';
})

限制向上滑動(dòng)最大區(qū)間：

向上滑動(dòng)時(shí)，當(dāng)ul的底部距盒子底部的距離大于設(shè)定值的時(shí)候，不讓其繼續(xù)向上滑動(dòng)，關(guān)鍵是這個(gè)值怎么去判斷？

求出向上滑動(dòng)最大值：

注意：因?yàn)?code>ul是向上滑動(dòng)的，所以求得的距離前面要加上一個(gè)負(fù)號(hào)（-）

示例代碼：

// 設(shè)定一個(gè)最大向下滑動(dòng)的距離
var maxDown = 50; 
// 求得一個(gè)最大向上滑動(dòng)的距離
var maxUp = -(ul.offsetHeight - draw.offsetHeight + maxDown); 

// touchmove 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchmove', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;

  // 上次的滑動(dòng)距離加上本次的滑動(dòng)距離
  var tempY = centerY + dy;

  // 當(dāng)上次滑動(dòng)的距離加上本次滑動(dòng)的距離 大于 設(shè)定的最大向下距離的時(shí)候
  if (tempY > maxDown) {
    tempY = maxDown;
  }
  // 當(dāng)上次滑動(dòng)的距離加上本次滑動(dòng)的距離 小于 設(shè)定的最大向上距離的時(shí)候 
  else if (tempY < maxUp) {
    // 直接讓偏移的值 等于這個(gè)設(shè)定值
    tempY = maxUp;
  }

  // 設(shè)置 ul 在 Y 軸上的偏移
  ul.style.transform = 'translateY(' + tempY + 'px)';
})

效果圖：

認(rèn)真觀察上圖，雖然成功的設(shè)置了最大滑動(dòng)區(qū)間，但是你有沒(méi)有發(fā)現(xiàn)，一直往一個(gè)方向滑動(dòng)的時(shí)候，雖然列表不會(huì)繼續(xù)往下滑動(dòng)，但是接著往相反方向滑動(dòng)的時(shí)候，感覺(jué)列表滑不動(dòng)，需要滑一段距離后，列表才會(huì)跟著走，這是為什么呢？因?yàn)榛瑒?dòng)的過(guò)程centerY是一直變的，列表雖然視覺(jué)上不動(dòng)了，但是在touchend事件的時(shí)候，它的centerY值一直在累加。解決方法請(qǐng)往下看：

6. 設(shè)定反彈區(qū)間

“滑動(dòng)反彈”，這里的反彈是本篇文章的最后一步，上面說(shuō)到的問(wèn)題，就在這里解決。因?yàn)槊恳淮斡|發(fā)touchend事件的時(shí)候，centerY值就累加一次，所以需要在touchend事件里做判斷。我們?cè)O(shè)定一個(gè)反彈區(qū)間，就是當(dāng)centerY的值大于或者小于某個(gè)值的時(shí)候，讓它觸發(fā)反彈。

設(shè)定向上反彈值：

向上的值比較簡(jiǎn)單，設(shè)置成“0”。為什么是“0”呢？我們限定只要手指離開(kāi)時(shí)，上一次的滑動(dòng)距離加上本次的距離> 0的時(shí)候，就讓它觸發(fā)反彈，并且反彈回0點(diǎn)的位置，也就是兩次滑動(dòng)的距離和= 0。

示例代碼：

// 向上反彈
var maxUpBounce = 0;

// touchend 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchend', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;
  // 記錄移動(dòng)的距離
  centerY = centerY + dy;

  // 兩次滑動(dòng)的距離 大于 設(shè)定的 向上 反彈值時(shí)
  if (centerY > maxUpBounce) {
    // 讓兩次滑動(dòng)的距離 等于 設(shè)置的值
    centerY = maxUpBounce;
    // 添加過(guò)渡
    ul.style.transition = 'transform .5s';
    ul.style.transform = 'translateY(' + centerY + 'px)';
  }
})

設(shè)定向下反彈值：

向下的值其實(shí)跟之前求滑動(dòng)區(qū)間差不多，我們參考下圖，當(dāng)列表向上滑動(dòng)，滑動(dòng)到列表底部的時(shí)候，只要此時(shí)再向上滑動(dòng)，就讓它向下反彈。向下反彈值就是-(ul.offsetHeight - draw.offsetHeight)，只要滑動(dòng)的差值小于這個(gè)設(shè)定值，就讓它向下反彈，并且反彈回設(shè)定值的位置。

示例代碼：

// 向上反彈值
var maxUpBounce = 0; 
 // 向下反彈值
var maxDownBounce = -(ul.offsetHeight - draw.offsetHeight);

// touchend 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
ul.addEventListener('touchend', function (e) {
  // 獲取差值
  var dy = e.changedTouches[0].clientY - startY;
  // 記錄移動(dòng)的距離
  centerY = centerY + dy;

  // 兩次滑動(dòng)的距離 大于 設(shè)定的 向上 反彈值時(shí)
  if (centerY > maxUpBounce) {
    // 讓兩次滑動(dòng)的距離 等于 設(shè)置的值
    centerY = maxUpBounce;
    // 添加過(guò)渡
    ul.style.transition = 'transform .5s';
    ul.style.transform = 'translateY(' + centerY + 'px)';
  }
  // 兩次滑動(dòng)的距離 小于 設(shè)定的 向下 反彈值時(shí)
  else if (centerY < maxDownBounce) {
    // 讓兩次滑動(dòng)的距離 等于 設(shè)置的值
    centerY = maxDownBounce;
    // 添加過(guò)渡
    ul.style.transition = 'transform .5s';
    ul.style.transform = 'translateY(' + centerY + 'px)';
  }
})

注意：在touchend事件的時(shí)候，給列表添加了transition屬性才會(huì)有反彈的效果，但是，下一次滑動(dòng)的時(shí)候，touchmove事件的時(shí)候，這個(gè)屬性還存在，所以就會(huì)出現(xiàn)滑動(dòng)的時(shí)候有頓挫感，所以在touchmove事件的時(shí)候，一進(jìn)來(lái)就清一下過(guò)渡ul.style.transition = 'none';。

完成后效果圖：

7. 完整代碼

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>移動(dòng)端 Touch 滑動(dòng)反彈</title>
  <style>
    /* 樣式初始化 */
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;

    }

    aside {
      height: 100%;
      width: 100%;
    }

    /* 列表的父盒子，限制寬高 */
    /* 注意設(shè)置overflow: hidden;樣式后，超出這個(gè)盒子的ul將不會(huì)顯示 */
    .draw {
      width: 60px;
      height: 500px;
      border: 2px solid #ccc;
      overflow: hidden;
      position: fixed;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* li 設(shè)置了浮動(dòng)， 所以 ul 要清除浮動(dòng) */
    ul:after {
      content: "";
      display: block;
      visibility: hidden;
      height: 0;
      clear: both;
    }

    ul {
      zoom: 1;
    }

    li {
      list-style: none;
      float: left;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  </style>
</head>
<aside>
  <div id="draw">
    <ul>
      <li style="background:orange">列表一</li>
      <li style="background:yellowgreen">列表二</li>
      <li style="background:yellow">列表三</li>
      <li style="background:cyan">列表四</li>
      <li style="background:orangered">列表五</li>
      <li style="background:pink">列表六</li>
      <li style="background:red">列表七</li>
      <li style="background:purple">列表八</li>
      <li style="background:violet">列表九</li>
      <li style="background:brown">列表十</li>
    </ul>
  </div>
</aside>

<body>
  <script>
    var draw = document.querySelector('#draw');
    var ul = draw.children[0];

    var startY = 0; // 剛觸碰到屏幕的時(shí)的手指信息
    var centerY = 0; // 用來(lái)記錄每次觸摸時(shí)上一次的偏移距離
    var maxDown = 50; // 設(shè)定一個(gè)最大向下滑動(dòng)的距離
    var maxUp = -(ul.offsetHeight - draw.offsetHeight + maxDown); // 求得一個(gè)最大向上滑動(dòng)的距離
    var maxUpBounce = 0; // 向上反彈值
    var maxDownBounce = -(ul.offsetHeight - draw.offsetHeight); // 向下反彈值

    // touchstart 時(shí)，記錄手指在 Y 軸上的落點(diǎn)距離可視頂部距離
    ul.addEventListener('touchstart', function (e) {
      startY = e.changedTouches[0].clientY;
    })

    // touchmove 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
    ul.addEventListener('touchmove', function (e) {
      // 清除過(guò)渡
      ul.style.transition = 'none';
      // 獲取差值
      var dy = e.changedTouches[0].clientY - startY;

      // 上次的滑動(dòng)距離加上本次的滑動(dòng)距離
      var tempY = centerY + dy;

      // 當(dāng)上次滑動(dòng)的距離加上本次滑動(dòng)的距離 大于 設(shè)定的最大向下距離的時(shí)候
      if (tempY > maxDown) {
        tempY = maxDown;
      }
      // 當(dāng)上次滑動(dòng)的距離加上本次滑動(dòng)的距離 小于 設(shè)定的最大向上距離的時(shí)候 
      else if (tempY < maxUp) {
        tempY = maxUp;
      }

      // 設(shè)置 ul 在 Y 軸上的偏移
      ul.style.transform = 'translateY(' + tempY + 'px)';
    })

    // touchend 時(shí)，記錄此時(shí)手指在 Y 軸上的落點(diǎn)距離可視頂部距離
    ul.addEventListener('touchend', function (e) {
      // 獲取差值
      var dy = e.changedTouches[0].clientY - startY;
      // 記錄移動(dòng)的距離
      centerY = centerY + dy;

      // 兩次滑動(dòng)的距離 大于 設(shè)定的 向上 反彈值時(shí)
      if (centerY > maxUpBounce) {
        // 讓兩次滑動(dòng)的距離 等于 設(shè)置的值
        centerY = maxUpBounce;
        // 添加過(guò)渡
        ul.style.transition = 'transform .5s';
        ul.style.transform = 'translateY(' + centerY + 'px)';
      }
      // 兩次滑動(dòng)的距離 小于 設(shè)定的 向下 反彈值時(shí)
      else if (centerY < maxDownBounce) {
        // 讓兩次滑動(dòng)的距離 等于 設(shè)置的值
        centerY = maxDownBounce;
        // 添加過(guò)渡
        ul.style.transition = 'transform .5s';
        ul.style.transform = 'translateY(' + centerY + 'px)';
      }
    })
  </script>
</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享原生js如何實(shí)現(xiàn)移動(dòng)端Touch滑動(dòng)反彈效果內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)站題目：原生js如何實(shí)現(xiàn)移動(dòng)端Touch滑動(dòng)反彈效果
轉(zhuǎn)載來(lái)于：http://aaarwkj.com/article6/gjceig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、外貿(mào)建站、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)