Unser aktuelles Szenario ist eine Webseite (erstellt von uns) in einem iframe in jemand anderen Website angezeigt. Der Iframe enthält eine Kendo-Bedienfeldleiste. Wenn Sie Elemente erweitern, können Sie mit zunehmender Höhe des Inhalts weiter und weiter nach unten blättern. Eine Schaltfläche kann angeklickt werden, um ein Bootstrap-Modal zu öffnen, aber wenn Sie die Seite nach unten scrollen, erscheint das Modal oben, manchmal vollständig außerhalb der Sicht. Sie können sehen, dass es geöffnet wurde, da der Hintergrund wie erwartet etwas dunkler wird, Sie jedoch die Seite nach oben scrollen müssen, um das Modal anzuzeigen. Es scheint nur ein Problem auf iOS zu sein, und scheint sowohl in Safari als auch in Chrome zu passieren. Wir haben es auf ios 10.3.3 getestet.Iframe Scrollen Problem in IOS
Hier ist ein Bild des Fehlers in Aktion:
Der iframe ist wie folgt:
<iframe src="..." width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">
ich die modal in Sicht Scrollen manuell versucht, aber es doesn‘ Im iframe scheint es wie erwartet zu funktionieren. Die Funktion verwende ich, um zu versuchen und die modale blättern in Sicht wie folgt:
(function ($) {
$.fn.scrollTo = function() {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'normal');
return this; // for chaining...
}
})(jQuery);
Dies wird durch die ‚‘ gezeigt Ereignis für die modale ausgelöst:
$("#contactUs_modal").on('shown.bs.modal', function (e) {
$("contactUs_modal").scrollTo();
$("#name").focus();
});
Ich habe auch versucht ScrollIntoView, scrollTop usw. ohne Glück, und $ (window) .scrollTop (0); scrollt den Hintergrund nach oben, nicht das Modal.
Alle Vorschläge würden sehr geschätzt werden, ich habe ziemlich viele Ideen ausgehen.