使用JavaScript控制iOS Web应用程序中列表上的垂直滚动和水平滑动

Question

我正在创建一个专门针对手机的网络应用程序(主要是iPhone,但Android和WP即将推出......).

其中一个屏幕包含滚动的项目列表.我希望该列表的行为类似于内置的iOS Mail应用程序.

换一种说法...

1. 如果用户触摸列表并向上或向下移动,则列表将垂直滚动.
2. 如果用户向上或向下轻拂,则列表以自然动量垂直滚动
3. 如果用户触摸列表并仅向左移动- 特定项目向左滑动,显示删除按钮.
4. 重要 - 列表应该滚动或项目应该滑动,但不能同时滚动.

所以 - 弄清楚用户的意图是很重要的,这意味着我可能需要阻止任何响应,直到我弄清楚用户是在垂直还是水平移动她的手指.

只需在列表容器上设置这些CSS样式......

overflow-y: auto;
-webkit-overflow-scrolling: touch;

......我得到了#1和#2.所以,我需要弄清楚如何实现#3.

我的第一个想法是实现这样的东西(伪代码)......

1. touchstart在列表容器上创建一个事件侦听器.在回调中,存储用户的起始触摸位置的x坐标和y坐标.
2. touchmove在列表容器上创建一个事件侦听器.在回调中,计算用户手指移动的距离(例如,delta_x和delta_y)
3. 如果delta_x 和 delta_y 都小于10像素 - 不要做任何事情(不要滚动列表或滑动项目) - 因为我们还没有弄清楚用户是计划向上/向下移动还是向左/向右移动.
4. 如果EITHER delta_x OR delta_y 超过10个像素 - 我们可以假设用户移动得足够远以表达她的意图.如果delta_y> delta_x,则假设她向上/向下移动,并允许列表滚动,但不要滑动项目.如果delta_x> delta_y,假设她向左/向右移动,那么我们应该允许项目滑动,但不允许列表滚动.

我预计我会在使用event.preventDefault()要么touchstart或touchmove滚动应该开始时控制.例如,

div.addEventListener("touchstart", function(e) {
    touchStart = {
        x: e.touches[0].pageX,
        y: e.touches[0].pageY
    }
}, false);
div.addEventListener("touchmove", function(e) {
    touchNow = {
        x: e.touches[0].pageX,
        y: e.touches[0].pageY
    }
    var
        dx = touchStart.x - touchNow.x,
        dy = touchStart.y - touchNow.y;
    if ((Math.abs(dx) < 10) && (Math.abs(dy) < 10)) {
        // prevent scrolling
        e.preventDefault();
    } else if (Math.abs(dx) > Math.abs(dy) < 10) {
        // moving right/left - slide item
    } else {
        // moving up/down - allow scrolling
    }
}, false);

但是 - 这不起作用.无论您移动多远,列表都不会滚动.

显然 - 我误解了触发滚动的内容,以及event.preventDefault()在此上下文中应该做什么.

那么 - 有没有办法完成我追求的目标？

我希望有一个纯粹的JavaScript解决方案(所以我更好地理解它),但jQuery方法可以.我绝对希望尽可能避免使用jQuery插件/库/框架......

提前致谢!

Answer 1

我不建议重新发明轮子。有许多支持手势检测的库。其中，我建议使用Hammer.js来检测触摸事件。

它没有任何依赖项，而且很小，压缩 + gzip 压缩后只有 3.96 kB！

这一切都是为了处理触摸事件，仅此而已。

就您而言，Hammer 具有内置swipe检测功能。

您可以通过指定来自定义默认的滑动手势：

• 方向：您想要检测滑动手势的方向（更多信息）
• 阈值：识别前所需的最小距离

• velocity : 识别前所需的最小速度（单位为 px/ms）

  和更多。

以下是一个简单的示例（Stack Snippet 似乎在模拟触摸事件时存在一些问题，fiddle 工作正常）：

var myElement = document.getElementById("container");
var hammertime = new Hammer(myElement, {});
hammertime.get('swipe').set({
  direction: 2 // 2 stands for left
})
hammertime.on('swipe', function(event) {
  event.target.querySelector(".delete").classList.add("show");
});

* {
  margin: 0;
  padding: 0;
}
#container {
  width: 250px;
  height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: dodgerblue;
}
#list {
  height: 100%;
  list-style: none;
}
#list li {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  border: 2px solid #fff;
}
#list li span.delete {
  display: inline-block;
  position: absolute;
  left: 250px;
  width: 50px;
  height: 40px;
  line-height: 40px;
  margin: 3px;
  text-align: center;
  background: #fff;
  transition: left 0.5s ease-in;
}
#list li span.delete.show {
  left: 170px;
}

<script src="http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<div id="container">
  <ul id="list">
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
    <li class="item"><span class="delete">&#215;</span>
    </li>
  </ul>
</div>

如果您更感兴趣的是了解触摸事件的工作原理而不是完成工作，那么我建议您深入了解 Hammer。

对于那些无法使用 jQuery 的人来说，还有一个Hammer.js jQuery 插件。