Hammer.js 滑动不适用于旋转的 iframe

Question

我在页面上制作了一个iframe，通过transform实现了旋转

    body.rotate iframe {
        transform: rotate(90deg);
        transform-origin: top right;
        position: absolute;
        top: 100%;
        right: 0;
        height:100vw;
        min-width:100vh;
    }

并尝试在 iframe 中的页面上添加滑动事件。

    var el = document.getElementById('swipe');
    Hammer(el).on('swipeleft', next);
    Hammer(el).on('swiperight', prev);
    Hammer(el).on('doubletap', preview);

当我在旋转的 iframe 中双击 div#swipe 时，会触发 preview()。但是 swipeleft 和 swiperight 不起作用。

Answer 1

请遵循本指南。

var el = document.getElementById('swipe');
var mc = new Hammer(el);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
Hammer(el).on('swipeleft', next);
Hammer(el).on('swiperight', prev);
Hammer(el).on('doubletap', preview);

Hammer.js 滑动不适用于旋转的 iframe

Hammer.js swipe does not working on rotated iframe

html

javascript

css

iframe

hammer.js