11

モバイル対応の Web サイト (ここでは iPhone を使用) で iScroll を使用して、div 内をスクロールしています。

この div には、次のような固定高さの iframe があります。

<body>
  <div id="iscroller">
    <iframe id="theIframe"></iframe>
    Other stuff
  </div>
</body>

今、div内でスクロールしている間、すべてが期待どおりに機能しますが、スクロールジェスチャが iframe で始まるとスクロールできません。

問題はここでかなりよく説明されています: https://github.com/cubiq/iscroll/issues/41

pointer-events:noneそのため、iframeに適用することで、その投稿の css 回避策を使用しました。

スクロールは完全に機能するようになりましたが、iframe のすべてのクリック/タッチ イベントがpointer-events: none.

ので、私は考えました：

「わかりました。ユーザーがスクロールしている間、必要pointer-events:noneです。ユーザーがスクロールしていない (代わりにクリックしている) 場合はpointer-events:auto 、クリック/タッチ イベントを通過させるために設定する必要があります。」

だから私はこれをしました：

CSS

#theIframe{pointer-events:none}

JavaScript

$("#theIframe").bind("touchstart", function(){
  // Enable click before click is triggered
  $(this).css("pointer-events", "auto");
});

$("#theIframe").bind("touchmove", function(){
  // Disable click/touch events while scrolling
  $(this).css("pointer-events", "none");
});

これを追加しても機能しません:

$("#theIframe").bind("touchend", function(){
  // Re-enable click/touch events after releasing
  $(this).css("pointer-events", "auto");
});

何をしても、スクロールが機能しないか、iframe 内のリンクをクリックしても機能しません。

うまくいきません。何か案は？

4

2 に答える 2

10

私は完璧な解決策を見つけました。iOSとAndroidでうまく機能します。

基本的な考え方は、そのiframeの上にdivレイヤーを配置することです。このように、スクロールはスムーズに機能します。

ユーザーがそのiframe上の要素をタップ/クリックしたい場合は、レイヤーをクリックするだけで、x座標とy座標を保存し、次の座標でiframeのコンテンツに対してクリックイベントをトリガーします。

HTML：

<div id="wrapper">
    <div id="layer"></div>
    <iframe id="theIframe"></iframe>
</div>
Other stuff

CSS：

#layer{
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2
}

JavaScript：

$('#layer').click(function(event){
    var iframe = $('#theIframe').get(0);
    var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    // Find click position (coordinates)
    var x = event.offsetX;
    var y = event.offsetY;

    // Trigger click inside iframe
    var link = iframeDoc.elementFromPoint(x, y);
    var newEvent = iframeDoc.createEvent('HTMLEvents');
    newEvent.initEvent('click', true, true);
    link.dispatchEvent(newEvent);
});
于 2013-03-18T11:10:18.663 に答える