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

Posted 2023-05-09

【中文标题】Hammer.js 滑动不适用于旋转的 iframe

【英文标题】：Hammer.js swipe does not working on rotated iframe

【发布时间】：2020-11-14 15:35:24

【问题描述】：

我在页面上制作了一个 iframe 并通过变换对其进行了旋转。

    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()。但是向左滑动和向右滑动不起作用。

【问题讨论】：

如果你双击div#swipe 在没有旋转的情况下，它会起作用吗？

doubletap 始终有效，但当 iframe 旋转时，swipeleft 和 swiperight 无效。

【参考方案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);