Прокрутка с двумя пальцами на сенсорной панели

Question

Мы разработали сайт с горизонтальной ориентацией и хотим реализовать управление с помощью сенсорной панели двумя пальцами влево / вправо.

Когда вы перемещаете два пальца влево / вправо на сенсорной панели, страница сайта прокручивается влево / вправо.Теперь мы реализовали управление тачпадом двумя пальцами вверх / вниз и прокруткой страницы влево / вправо.

Как изменить управление сенсорной панелью двумя пальцами, перемещаясь вверх / вниз влево / вправо для прокрутки страницы сайта влево / вправо с помощью js или jQuery?

Answer 1

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

function doScroll(e) {
    // positive deltas are top and left
    // down and right are negative

    // horizontal offset    e.deltaX
    // vertical offset      e.deltaY

    console.log(`x:${e.deltaX} y:${e.deltaY}`);

    e.preventDefault(); // disable the actual scrolling
}

window.addEventListener("wheel", doScroll, false);

Я подготовил скрипку , которая сообщает вам направление прокрутки и значения смещения, но предотвращает саму прокрутку.

Событие wheel имеет свойство delta, которое (по крайней мере, в Chrome) чувствительно к импульсу и дает вам текущее относительное смещение прокрутки, а не абсолютную позицию прокрутки, доступную в событии scroll.

Answer 2

Обычно, когда вы хотите использовать сенсорные события в сценарии, вы добавляете что-то вроде этого, чтобы предотвратить обычную прокрутку и масштабирование:

$("body").bind("touchstart", function(e) {
    e.preventDefault();
})

Answer 3

Что вам нужно сделать, это изменить то, что можно прокрутить.Если ваша страница достаточно велика, где имеет смысл прокрутка влево / вправо, браузер разрешит ее прокрутку таким образом.

По сути, если вы хотите, чтобы они прокручивались только в определенном направлении, создавайте контент только в этом направлении.При необходимости вы можете добиться этого, установив в контейнер div нужного размера с переполнением, равным none.