Hammer.js: как сохранить один палец для прокрутки окна, два пальца для увеличения / увеличения / панорамирования изображения и т. Д.

Question

Я использую Hammer.js для включения настраиваемого пинч-масштабирования и т. Д. На изображениях на мобильных дисплеях.Пинч-масштабирование сначала двумя пальцами и панорамирование вокруг изображения одним пальцем включено и работает нормально, за исключением того, что это создает проблему для прокрутки самого окна:

Прокрутка мобильного дисплея одним пальцем отключенанад изображением в целом.Если пользователь прокручивает экран вниз и проводит пальцем по самому изображению, прокрутка останавливается.Прокрутка окна может только быть достигнута при прикосновении / смахивании областей вне (выше / ниже) изображения.И, как объяснено выше, панорамирование изображения только одним пальцем происходит только после масштабирования изображения двумя пальцами.Итак, пролистывание одним пальцем по не увеличенному изображению приводит к полной остановке прокрутки страницы / окна.

Что я хотел бы сделать, это (A) включить действия двумя пальцами только для панорамирования увеличенного изображения и (B) проведением 1 пальца по верху изображения для перемещения окна / дисплея при его обычном перемещении (в настоящее время это может происходить только при проведении пальцем за пределами изображения 1).С выполнением (A) и (B) страница должна нормально прокручиваться, когда пользователь использует один палец для прокрутки вверх и вниз по окну - независимо от того, касается ли пользователь и проводит пальцем изображение, контролируемое hammer.js, - исамо изображение может панорамироваться двумя пальцами после масштабирования двумя пальцами ... таким образом, управление двумя пальцами должно влиять на изображение, управление одним пальцем (включение или выключение изображения) должно влиять на окно.

Я использую эту подпрограмму, изначально найденную здесь , для создания Hammer.js-контроля изображения.Как бы я отредактировал его (или какие дополнительные JS потребовались бы вне его) для достижения эффекта, описанного выше?

var hammerIt = function (elm) {
    var el;
    var hammertime;
    var lastPosX;
    var lastPosY;
    var lastScale;
    var maxPosX;
    var maxPosY;
    var posX;
    var posY;
    var scale;
    var transform;

    hammertime = new window.Hammer(elm, {});
    hammertime.get('pinch').set({
        enable: true
    });

    posX = 0;
    posY = 0;
    scale = 1;
    lastScale = 1;
    lastPosX = 0;
    lastPosY = 0;
    maxPosX = 0;
    maxPosY = 0;
    transform = '';
    el = elm;

    hammertime.on('doubletap pan pinch panend pinchend', function (ev) {
        if (ev.type === 'doubletap') {
            transform = 'translate3d(0, 0, 0) scale3d(2, 2, 1) ';
            scale = 2;
            lastScale = 2;
            try {
                if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() !== 'matrix(1, 0, 0, 1, 0, 0)') {
                    transform = 'translate3d(0, 0, 0) scale3d(1, 1, 1) ';
                    scale = 1;
                    lastScale = 1;
                }
            } catch (err) {
                console.log(err);
            }
            el.style.webkitTransform = transform;
            transform = '';
        }

//pan
        if (scale !== 1) {
            posX = lastPosX + ev.deltaX;
            posY = lastPosY + ev.deltaY;
            maxPosX = Math.ceil((scale - 1) * el.clientWidth / 2);
            maxPosY = Math.ceil((scale - 1) * el.clientHeight / 2);
            if (posX > maxPosX) {
                posX = maxPosX;
            }
            if (posX < -maxPosX) {
                posX = -maxPosX;
            }
            if (posY > maxPosY) {
                posY = maxPosY;
            }
            if (posY < -maxPosY) {
                posY = -maxPosY;
            }
        }

//pinch
        if (ev.type === 'pinch') {
            scale = Math.max(0.999, Math.min(lastScale * (ev.scale), 4));
        }

        if (ev.type === 'pinchend') {
            lastScale = scale;
        }

//panend
        if (ev.type === 'panend') {
            lastPosX = posX < maxPosX
            ? posX
            : maxPosX;
            lastPosY = posY < maxPosY
            ? posY
            : maxPosY;
        }

        if (scale !== 1) {
            transform = 'translate3d(' + posX + 'px, ' + posY + 'px, 0) ' + 'scale3d(' + scale + ', ' + scale + ', 1)';
        }

        if (transform) {
            el.style.webkitTransform = transform;
        }
    });
};