Après avoir essayé de trouver une solution qui gère toutes les circonstances (options pour animer le défilement, remplissage autour de l'objet une fois qu'il défile dans la vue, fonctionne même dans des circonstances obscures comme dans une iframe), j'ai finalement écrit ma propre solution à cela. Comme cela semble fonctionner lorsque de nombreuses autres solutions ont échoué, j'ai pensé le partager:
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 est un objet jQuery contenant l'objet que vous souhaitez afficher si nécessaire.
options (facultatif) peut contenir les options suivantes passées dans un objet:
options.$container- un objet jQuery pointant vers l'élément contenant de $ target (en d'autres termes, l'élément dans le dom avec les barres de défilement). Par défaut, la fenêtre contenant l'élément $ target est suffisamment intelligente pour sélectionner une fenêtre iframe. N'oubliez pas d'inclure le $ dans le nom de la propriété.
options.padding- le remplissage en pixels à ajouter au-dessus ou au-dessous de l'objet lorsqu'il défile dans la vue. De cette façon, il n'est pas juste contre le bord de la fenêtre. La valeur par défaut est 20.
options.instant- si défini sur true, jQuery animate ne sera pas utilisé et le défilement apparaîtra instantanément à l'emplacement correct. La valeur par défaut est false.
options.animationOptions- toutes les options jQuery que vous souhaitez passer à la fonction d'animation jQuery (voir http://api.jquery.com/animate/ ). Avec cela, vous pouvez modifier la durée de l'animation ou faire exécuter une fonction de rappel lorsque le défilement est terminé. Cela ne fonctionne que si options.instantest défini sur false. Si vous avez besoin d'une animation instantanée mais avec un rappel, définissez options.animationOptions.duration = 0au lieu d'utiliser options.instant = true.