Nachdem ich versucht hatte, eine Lösung zu finden, die alle Umstände bewältigte (Optionen zum Animieren der Schriftrolle, Auffüllen des Objekts, sobald es in die Ansicht gescrollt wurde, funktioniert auch unter dunklen Umständen wie in einem Iframe), schrieb ich schließlich meine eigene Lösung dafür. Da es zu funktionieren scheint, wenn viele andere Lösungen fehlgeschlagen sind, dachte ich, ich würde es teilen:
function scrollIntoViewIfNeeded($target, options) {
var options = options ? options : {},
$win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
$container = options.$container ? options.$container : $win,
padding = options.padding ? options.padding : 20,
elemTop = $target.offset().top,
elemHeight = $target.outerHeight(),
containerTop = $container.scrollTop(),
//Everything past this point is used only to get the container's visible height, which is needed to do this accurately
containerHeight = $container.outerHeight(),
winTop = $win.scrollTop(),
winBot = winTop + $win.height(),
containerVisibleTop = containerTop < winTop ? winTop : containerTop,
containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
containerVisibleHeight = containerVisibleBottom - containerVisibleTop;
if (elemTop < containerTop) {
//scroll up
if (options.instant) {
$container.scrollTop(elemTop - padding);
} else {
$container.animate({scrollTop: elemTop - padding}, options.animationOptions);
}
} else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
//scroll down
if (options.instant) {
$container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
} else {
$container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
}
}
}
$target ist ein jQuery-Objekt, das das Objekt enthält, in das Sie bei Bedarf scrollen möchten.
options (optional) kann die folgenden in einem Objekt übergebenen Optionen enthalten:
options.$container- Ein jQuery-Objekt, das auf das enthaltende Element von $ target zeigt (dh das Element im Dom mit den Bildlaufleisten). Der Standardwert ist das Fenster, das das $ target-Element enthält und intelligent genug ist, um ein Iframe-Fenster auszuwählen. Denken Sie daran, das $ in den Eigenschaftsnamen aufzunehmen.
options.padding- das Auffüllen in Pixel, das über oder unter dem Objekt hinzugefügt werden soll, wenn es in die Ansicht gescrollt wird. Auf diese Weise ist es nicht direkt am Rand des Fensters. Der Standardwert ist 20.
options.instant- Wenn true festgelegt ist, wird jQuery animate nicht verwendet und der Bildlauf wird sofort an die richtige Stelle verschoben. Der Standardwert ist false.
options.animationOptions- Alle jQuery-Optionen, die Sie an die jQuery-Animationsfunktion übergeben möchten (siehe http://api.jquery.com/animate/ ). Mit dieser Option können Sie die Dauer der Animation ändern oder eine Rückruffunktion ausführen lassen, wenn der Bildlauf abgeschlossen ist. Dies funktioniert nur, wenn options.instantfalse festgelegt ist. Wenn Sie eine sofortige Animation mit einem Rückruf benötigen, stellen Sie diese options.animationOptions.duration = 0anstelle der Verwendung ein options.instant = true.