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 musspointer-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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich die perfekte Lösung gefunden. Funktioniert Super auf iOS und Android.
Die grundlegende Idee ist, einen div-layer auf der Oberseite des iframe. Auf diese Weise scrollen funktioniert reibungslos.
Wenn der Benutzer will, Tippen/klicken Sie auf ein element auf diesem iframe habe ich einfach zu fangen, klicken Sie auf die Schicht, speichern Sie die x-und y-Koordinaten und lösen Sie eine click-Ereignis des iframe-Inhalts bei diesen Koordinaten:
HTML:
CSS:
JavaScript:
Wenn Ihre Benutzer brauchen nicht zu klicken auf links innerhalb des iFrames, Sie können css-Attribut
pointer-events:none
statt.Danke ich geschätzt
Was ist, wenn der Benutzer in der Lage sein müssen zu tun, streichen oder Prise in den iFrame?
Auch INNERHALB der iframe-es würde funktionieren, aber alle die touch-events werden "angesaugt" in den iframe, also, wenn Sie erwarten, dass touch-Ereignisse (wie streichen und ähnliches) ausgelöst werden, die außerhalb des iframe (wie oben), funktioniert es nicht.
InformationsquelleAutor Timo
Fand ich eine Lösung dafür, es passiert nahe zu sein, was die anderen Jungs schon erwähnt, auf github aber dies kann nützlich sein für wer finden will, um eine schnelle funktionierende Lösung für dieses problem.
Ich gehe davon aus, dass ein paar Dinge, wie es nur eine iscroll container, hier dargestellt als ID. Dies ist nicht richtig getestet und Bedürfnissen umgestalten. Es ist die Arbeit in meinem Projekt, aber ich habe es hier etwas für das Beispiel, aber ich denke, Sie werden leicht verstehen, was Sie tun müssen:
Dank für das schauen!
InformationsquelleAutor punkbit