在iPad和iPhone上滚动到iframe

Question

I have a couple of iFrames in my page, and it is not possible to scroll over those iframes on tablet, phone devices, and in firefox as well. To solve this, I placed a fixed div over the iframe and have the following code to copy the the pointer position (when click happens) and trigger click inside iframe , now the fixed div allows me to scroll over the iFrames and click works too. But when in desktop, even though the click works thanks to this trick, the hover does not work so the buttons and everything else with hover become dead solid. Is there any better solution for this touch-scrolling issue on iFrames?

This is the code I am using to copying and transferring the position of mouse to the iframe and execute the click (foo = the fixed div over the iframe):

$('.foo').click(function(event){
    var iframe = $('.frameClass').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);
});

Answer 1

I have had many problems with the iframe scroll on iPad. All the possible answers can be found on this page : http://dev.magnolia-cms.com/~czimmermann/blog/ipad-iframe/iframe1-tall.html