iframe阻止移動Safari上的iScroll滾動

我在我的移動啓用網站（使用iPhone）上使用iScroll在div內滾動。iframe阻止移動Safari上的iScroll滾動

在這個這個div，我有一個固定的高度這樣的iframe：現在

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

，而專區內滾動，一切正常，但是當滾動姿態開始於我不能滾動iframe。

的問題在這裏描述得很好：https://github.com/cubiq/iscroll/issues/41

所以，我通過應用pointer-events:none到IFRAME使用從該職位的CSS解決方法。

現在滾動的作品完美但我無法點擊它們的iframe中定義的任何鏈接，因爲所有的點擊/觸摸事件上的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中的鏈接都不起作用。

不起作用。有任何想法嗎？

來源

2013-03-06 Timo

我找到了完美的解決方案。適用於iOS和Android。

基本的想法是將一個div層放在該iframe之上。這種方式滾動工作順利。

如果用戶想挖掘/點擊該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-18 11:10:18 Timo

有沒有其他方法可以做到這一點？這是一個聰明的方法來做到這一點，但我沒有控制iframe，如果它確實改變了即時通訊的螺絲，謝謝隊友:) – jycr753 2013-06-18 21:37:20

@ jycr753如果你的用戶不需要點擊iframe中的鏈接，你可以使用而不是css屬性'pointer-events：none'。 – Timo 2013-06-20 08:51:30

感謝我的讚賞 – jycr753 2013-06-20 08:53:32

我找到了一個解決方案，它正好是接近什麼其他人在GitHub上已經提到，但這可能是誰想找到這個問題的快速解決工作有用。

我假設了幾件事情，比如只有一個iscroll容器，這裏表示爲ID。這沒有經過適當的測試，需要重構。它的工作在我的項目，但我改變了這裏稍微的例子，但我猜你會很容易理解，你需要做什麼：

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滾動

回答

相關問題