Управление вертикальной прокруткой и горизонтальным считыванием списка в веб-приложении iOS с помощью JavaScript

Я создаю веб-приложение, специально предназначенное для телефонов (в первую очередь iPhone, но Android и WP находятся на горизонте...).

один из экранов содержит прокручиваемый список элементов. Я хотел бы, чтобы список вел себя аналогично встроенному почтовому приложению iOS.

другими словами...

1. если пользователь касается списка и перемещается вверх или вниз, список прокручивается по вертикали.
2. если пользователь щелкает вверх или вниз, список прокручивается вертикально с естественным импульсом
3. если пользователь касается списка и перемещается только left-конкретный элемент скользит влево, показывая кнопку удаления.
4. главное - список должен прокручиваться или элемент должен скользить, НО НИКОГДА ОБА.

So-важно выяснить, каковы намерения пользователя, что означает, что мне, вероятно, нужно предотвратить любой ответ, пока я не пойму ли пользователь двигает ее пальцем вертикально или горизонтально.

просто установив эти стили 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. если или delta_x или 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);

однако-это не работает. Независимо от того, как далеко вы двигаетесь, список никогда свитки.

очевидно-я не понимаю, что вызывает прокрутку и какое событие.в этом контексте предполагается, что preventDefault ().

Итак-есть ли способ выполнить то, что я ищу?

Я надеюсь на чистое решение JavaScript (поэтому я понимаю его лучше), но подход jQuery было бы неплохо. Я определенно надеюсь избежать плагина / библиотеки / фреймворка jQuery, если это вообще возможно...

спасибо заранее!