iframe verhindert iScroll scrollen auf mobile Safari

Bin ich mit iScroll auf meinem Handy aktivieren-website (mit dem iPhone hier) zu Blättern innerhalb eines div.

In diesem div habe ich ein iframe mit einer festen Höhe wie diese:

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

Nun, beim scrollen innerhalb der div, funktioniert alles wie erwartet, aber ich kann nicht scrollen, wenn die Scroll-Geste beginnt auf der iframe -.

Das problem ist hier beschrieben Recht gut: https://github.com/cubiq/iscroll/issues/41

So, ich habe das css-workaround aus, dass die post durch die Anwendung pointer-events:none auf den iframe.

Nun scrollen funktioniert perfekt aber ich kann nicht klicken Sie auf keine links, die sind definiert, die innerhalb des iframe-weil alle Klick/touch-events auf den iframe zu sein scheint blockiert aufgrund pointer-events: none.

So, ich dachte:

"Ok, während der Benutzer scrollt, muss ich pointer-events:none. Wenn er
nicht scrollen (und statt zu klicken), die ich einstellen muss pointer-events:auto
damit das Klick/touch-Ereignisse übergeben."

Also ich habe das:

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");
});

Sogar hinzufügen, dass diese nicht funktioniert:

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

Egal was ich mache: Entweder scrollen nicht funktioniert oder Klick auf den link innerhalb des iFrames funktioniert nicht.

Nicht funktioniert. Irgendwelche Ideen?

InformationsquelleAutor Timo | 2013-03-06

Schreibe einen Kommentar