原生js如何实现移动端Touch滑动反弹效果-创新互联

这篇文章主要介绍了原生js如何实现移动端Touch滑动反弹效果，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

移动端 Touch 滑动反弹

什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：

1. 准备工作

什么是移动端的Touch事件？在移动端Touch事件可以细分成三种，分别是：touchstart、touchmove和touchend，并且touch事件必须要用addEventListener去监听。

touchStart当手指触碰到屏幕的时候触发

touchmove当手指在屏幕上不断移动的时候触发

touchend当手指离开屏幕的时候触发

Touch 事件触发的 Event 对象：

// 手指触碰到屏幕时触发
element.addEventListener('touchstart', function (e) {
    // 打印的事件对象
    console.log(e);
})

changedTouches、targetTouches、touches都是伪数组，里面装的是手指列表

三种返回对象的区别：

其实这三种返回的对象，都是表示用户触摸事件时的手指信息，之所以是一个伪数组，是因为有可能出现多指同时触摸，但是在实际工作中一般不去考虑多指的情况。而它们唯一的区别就是在touchstart和touchmove事件的时候，changedTouches、targetTouches、touches都能获取到手指的信息，但是在touchend事件的时候，targetTouches、touches对象是不能返回离开屏幕时的手指信息，只有changedTouches对象能返回。

有哪些手指信息？

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

clientX:74    // 触摸点相对于浏览器的 viewport 左边缘的 x 坐标，不会包括左边的滚动距离。
clientY:73    // 触摸点相对于浏览器的 viewport 上边缘的 Y 坐标，不会包括上边的滚动距离。
screenX:2202  // 触摸点相对于屏幕左边缘的 x 坐标。
screenY:327   // 触摸点相对于屏幕上边缘的 Y 坐标。
pageX:65      // 触摸点相对于 document 的左边缘的 x 坐标，包括左边的滚动距离
pageY:18      // 触摸点相对于 document 的上边缘的 Y 坐标，包括左边的滚动距离

此案例模拟的是移动端的一种滑动菜单效果。