本文详细介绍了如何利用HTML5的触摸事件来判断用户在触摸屏上的滑动方向。通过监听touchstart和touchend事件，记录初始和结束时的触点位置，计算相对位移来确定滑动方向。同时，文章提到了Chrome中滚动位置获取的特殊性，并给出了原生JS判断视图滚动方向的示例代码，适用于移动设备的交互开发。
这篇文章主要介绍了html5触摸事件判断滑动方向的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。
为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力.
接口
TouchEvent
TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。每 个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表.
触摸事件的类型
为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型touchstart：当用户在触摸平面上放置了一个触点时触发。
touchend：当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。
touchmove：当用户在触摸平面上移动触点时触发。
touchcancel：当触点由于某些原因被中断时触发。
判断滑动方向
基本原理就是记录开始滑动(touchStart)和结束滑动(touchEnd)的坐标位置，然后进行相对位置的计算。
原生JS方法
除了H5新增的方法外，还可以用原生JS判断view的滑动方向，代码如下(可直接运行)：
要注意的是chrome对document.body.scrollTop一直是0，需要改成document.documentElement.scrollTop
脚本之家(jb51.net)p {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
HEllo word
function scroll( fn ) {
var beforeScrollTop = document.documentElement.scrollTop,
fn = fn || function() {};
console.log('beforeScrollTop',beforeScrollTop);
window.addEventListener("scroll", function() {
var afterScrollTop = document.documentElement.scrollTop,
delta = afterScrollTop - beforeScrollTop;
console.log('beforeScrollTop',beforeScrollTop);
console.log('afterScrollTop',afterScrollTop);
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) { console.log(direction) });
相关推荐：
HTML5中的强制下载属性download使用
HTML5 Canvas实现文本对齐的方法总结
扫一扫
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
