Depois de tentar encontrar uma solução que lidasse com todas as circunstâncias (opções para animar o pergaminho, percorrendo o objeto depois que ele fosse exibido, funcionasse mesmo em circunstâncias obscuras, como em um iframe), finalmente acabei escrevendo minha própria solução para isso. Como parece funcionar quando muitas outras soluções falharam, pensei em compartilhá-lo:
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 é um objeto jQuery que contém o objeto que você deseja rolar para exibição, se necessário.
options (opcional) pode conter as seguintes opções passadas em um objeto:
options.$container- um objeto jQuery apontando para o elemento que contém $ target (em outras palavras, o elemento no dom com as barras de rolagem). O padrão é a janela que contém o elemento $ target e é inteligente o suficiente para selecionar uma janela iframe. Lembre-se de incluir o $ no nome da propriedade.
options.padding- o preenchimento em pixels para adicionar acima ou abaixo do objeto quando ele é rolado para exibição. Desta forma, não está bem contra a borda da janela. O padrão é 20.
options.instant- se definido como true, o jQuery animate não será usado e a rolagem aparecerá instantaneamente no local correto. O padrão é false.
options.animationOptions- quaisquer opções do jQuery que você deseja passar para a função animada do jQuery (consulte http://api.jquery.com/animate/ ). Com isso, você pode alterar a duração da animação ou executar uma função de retorno de chamada quando a rolagem estiver concluída. Isso funciona apenas se options.instantestiver definido como false. Se você precisar de uma animação instantânea, mas com um retorno de chamada, defina em options.animationOptions.duration = 0vez de usar options.instant = true.