Heim > Artikel > Web-Frontend > Wie implementiert man Scrollen innerhalb eines iFrames in Mobile Safari?
Beim Versuch, einen iFrame in eine mobile Webanwendung mit Safari auf iOS-Geräten einzubetten, entsteht eine häufige Herausforderung: die Beschränkung der Abmessungen des iFrames auf Passen Sie den iPhone-Bildschirm an. Höhen- und Breitenattribute innerhalb des iFrame-Elements haben oft keine Auswirkung.
Eine einfache Lösung besteht jedoch darin, den iFrame in ein div-Element einzuschließen. Dies ermöglicht die Kontrolle der Größe des iFrames, wirft jedoch ein neues Problem auf: die Unfähigkeit, innerhalb des iFrames zu scrollen.
Um dieses Problem zu beheben, führen Sie die folgenden Schritte aus:
Unten finden Sie ein Beispiel für den JavaScript- und HTML-Code, um dies zu erreichen:
// JavaScript setTimeout(function () { var startY = 0; var startX = 0; var b = document.body; b.addEventListener("touchstart", function (event) { parent.window.scrollTo(0, 1); startY = event.targetTouches[0].pageY; startX = event.targetTouches[0].pageX; }); b.addEventListener("touchmove", function (event) { event.preventDefault(); var posy = event.targetTouches[0].pageY; var h = parent.document.getElementById("scroller"); var sty = h.scrollTop; var posx = event.targetTouches[0].pageX; var stx = h.scrollLeft; h.scrollTop = sty - (posy - startY); h.scrollLeft = stx - (posx - startX); startY = posy; startX = posx; }); }, 1000);
<!-- HTML --> <div>
Bitte beachten Sie: Wenn Sie den iFrame-Inhalt nicht kontrollieren, können Sie stattdessen ein Overlay implementieren. Diese Lösung ermöglicht jedoch keine Interaktion mit dem iFrame-Inhalt, abgesehen vom Scrollen.
Das obige ist der detaillierte Inhalt vonWie implementiert man Scrollen innerhalb eines iFrames in Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!