Как контролировать поведение прокрутки мобильного браузера с помощью jQuery?

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

Отключить прокрутку страницы, чтобы обеспечить лучший опыт прокрутки, довольно просто. Я просто использую preventDefault() и сохраняю координаты для будущего использования:

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

};

Проблема заключается в возможности повторного включения прокрутки, когда пользователь проходит определенные допуски. Основная трудность заключается в том, чтобы сделать это ВО ВРЕМЯ одного и того же события касания.

Это самое близкое, что я сделал, чтобы заставить его работать, но это приводит к рывкам прокрутки и (потенциально) блокирует возможность просмотра пользователем строки URL:

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

    var changeY = this.originalCoord.y - this.finalCoord.y;

    if (changeY > this.config.threshold.y || changeY < ( this.config.threshold.y * -1 ) )
    {
        var move = window.pageYOffset + changeY;

        window.scrollTo( 0, move );
    }
};

Вещи, которые я пробовал, которые не сработали:

  1. Условно вызывая preventDefault(). Это было наиболее очевидным, но, к сожалению, после вызова preventDefault кажется, что нет способа его отменить.
  2. Использование stopPropigation(). Это не предотвращает прокрутку страницы.
  3. Использование return false. Это также не препятствует прокрутке страницы.
  4. Использование 3D-преобразований CSS для выполнения прокрутки. На самом деле, это имеет потенциал, но также вызывает некоторое поведение, вызывающее головную боль.
  5. Добавление прозрачного наложения div для перехвата события. Добавление div работает нормально, но не захватывает событие.

Есть ли способ выполнить то, что я пытаюсь сделать?


person RARay    schedule 16.05.2012    source источник


Ответы (1)


Я нашел плагин touchSwipe через этот комментарий к другому вопросу. При просмотре этого кода кажется, что это логическая проблема с тем, как я пытался применить preventDefault().

В любом случае плагин отлично работает для моих нужд.

person RARay    schedule 17.05.2012