iframeがモバイルSafari上でiScrollのスクロールを防止する

私はモバイル対応ウェブサイト（ここではiPhoneを使用しています）でiScrollを使用してdiv内をスクロールしています。 div要素内のスクロール、すべてが期待どおりに動作しますが、スクロールジェスチャーがオンに開始したとき、私はスクロールすることはできませんが、iframeがモバイルSafari上でiScrollのスクロールを防止する

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

：今この本のdivで

、私はこのような固定の高さではiframeを持っていますiframe。

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

だから、私は、IFRAMEにpointer-events:noneを適用することによって、そのポストからCSSの回避策を使用しました。今、私はすべてのクリックは/ IFRAMEにイベントを触れるためのiframe内で定義されている任意のリンクをクリックすることはできません完全にが、を作品をスクロール

が原因pointer-events: noneにブロックされているように見えます。

だから、私は考えた：

「OK、ユーザーがスクロールしながら、私は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内のリンクをクリックしても機能しません。

動作しません。何か案は？

出典

2013-03-06 Timo

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

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

ユーザーがタップ/私は単純に、層の上にそのクリックをキャッチし、xとy座標を保存し、これらの座標でのiframeのコンテンツのクリックイベントをトリガしているの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-18 11:10:18 Timo

これを行う方法は他にありませんか？これを行うにはスマートな方法ですが、私はiframeを制御することはできません。もしそれがim screwを変更するならば、感謝の仲間です:) – jycr753

@ jycr753 iframe内のリンクをクリックする必要がない場合は、 css属性 'pointer-events：none'を代わりに使用します。 – Timo

ありがとう、ありがとうございました – jycr753

私はこのための解決策を見つけ、他の人がすでにgithubの上で述べたものに近いことを起こるが、これは、この問題のための高速な作業解像度を見つけたい人は誰でものために有用である可能性があります。

ここでは、IDとして表されているiscrollコンテナが1つだけあるように、私はいくつかのことを想定しています。これは適切にテストされておらず、リファクタリングが必要です。それは私のプロジェクトに取り組んでいるが、私は例えば、わずかにそれをここに変更が、私はあなたが簡単にあなたが何をする必要があるかを理解しますね：

var $iscroll = $('#iscroll'); 

document.addEventListener('touchstart', function(e) { 

if ($iscroll.find('iframe').length > 0){ 

    $.each($iscroll.find('iframe'), function(k,v){ 

     var $parent = $(v).parent().first(); 

     if ($parent.find('.preventTouch').length == 0){ 

      $('<div class="preventTouch" style="position:absolute; z-index:2; width:100%; height:100%;"></div>') 
       .prependTo($parent); 

     }; 

     $parent 
      .css('position', 'relative').css('z-index', 1); 

    }); 

    $iscroll.find('.preventTouch').on('click', function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    }); 

}; 

}; 

document.addEventListener('touchend', function(e) { 

if ($iscroll.find('iframe').length > 0){ 

    setTimeout(function(){ 

     var $iscroll = $('#iscroll'); 

     $iscroll.find('.preventTouch').remove(); 
     $iscroll.find('iframe').css('z-index', ''); 
     $iscroll.find('.preventTouch').off('click'); 

    }, 400); 

}; 

};

感謝を探して！

出典

2013-11-08 16:34:18 punkbit

iframeがモバイルSafari上でiScrollのスクロールを防止する

答えて

関連する問題