Спробувавши знайти рішення, яке вирішило б будь-яку обставину (варіанти анімації прокрутки, оббивання об'єкта, коли він прокручується, працює навіть у незрозумілих обставинах, наприклад, в iframe), я нарешті закінчив написати власне рішення цього питання. Оскільки, здається, працює, коли багато інших рішень не вдалося, я подумав, що поділюсь цим:
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 - об’єкт jQuery, що містить об'єкт, який потрібно прокрутити до перегляду, якщо це необхідно.
options (необов'язково) може містити такі параметри, передані в об'єкті:
options.$container- об’єкт jQuery, що вказує на містить елемент $ target (іншими словами, елемент у домі зі смугами прокрутки). За замовчуванням використовується вікно, яке містить цільовий елемент $ і досить розумне, щоб вибрати вікно iframe. Не забудьте додати $ у назві властивості.
options.padding- прокладки в пікселях, які потрібно додати над об'єктом або під ним, коли він прокручується до перегляду. Таким чином, це не вірно до краю вікна. За замовчуванням до 20.
options.instant- якщо встановлено значення true, анімація jQuery не використовуватиметься, а прокрутка миттєво з’явиться у потрібному місці. Типово встановлено значення false.
options.animationOptions- будь-які варіанти jQuery, які ви хочете перейти до функції анімації jQuery (див. http://api.jquery.com/animate/ ). За допомогою цього ви можете змінити тривалість анімації або виконати функцію зворотного дзвінка, виконану після завершення прокрутки. Це працює лише якщо options.instantвстановлено значення false. Якщо вам потрібна миттєва анімація, але з зворотним дзвінком, встановіть options.animationOptions.duration = 0замість цього options.instant = true.