У меня есть документ HTML с изображениями в формате сетки с помощью <ul><li><img.... Окно браузера имеет вертикальную и горизонтальную прокрутку.
Вопрос:
Когда я нажимаю на изображение <img>, как я могу заставить весь документ прокручиваться до позиции, где только что щелкнуло изображение, является top:20px; left:20px?
У меня есть просмотр здесь для похожих сообщений... хотя я совершенно новичок в JavaScript и хочу понять, как это достигается для меня.
Поскольку вы хотите знать, как это работает, я объясню его шаг за шагом.
Сначала вы хотите связать функцию как обработчик кликов изображения:
$('#someImage').click(function () {
// Code to do scrolling happens here
});
Это применит обработчик кликов к изображению с помощью id="someImage". Если вы хотите сделать это со всеми изображениями, замените '#someImage' на 'img'.
Теперь для фактического кода прокрутки:
Получить смещения изображения (относительно документа):
var offset = $(this).offset(); // Contains .top and .left
Вычтите 20 из top и left:
offset.left -= 20;
offset.top -= 20;
Теперь анимируйте свойства CSS прокрутки и прокрутки слева от <body> и <html>:
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
});
Там DOM-метод называется scrollIntoView, который поддерживается всеми основными браузерами, который выровняет элемент с верхним/левым (или как можно ближе).
$("#myImage")[0].scrollIntoView();
В поддерживаемых браузерах вы можете указать параметры:
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
В качестве альтернативы, если все элементы имеют уникальные идентификаторы, вы можете просто изменить свойство hash объекта location для возврата/поддержка кнопок вперед:
$(document).delegate("img", function (e) {
if (e.target.id)
window.location.hash = e.target.id;
});
После этого просто настройте свойства scrollTop/scrollLeft на -20:
document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
Самое простое решение, которое я видел
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Посмотрите на jQuery.scrollTo плагин. Здесь demo.
В этом плагине есть много вариантов, которые выходят за рамки native scrollIntoView. Например, вы можете настроить плавность прокрутки, а затем установить обратный вызов для завершения прокрутки.
Вы также можете посмотреть все плагины JQuery с тегом "прокрутка" .
Есть способы прокрутки элемента непосредственно в представлении, но если вы хотите прокрутить до относительного элемента относительно элемента, вам нужно сделать это вручную:
Внутри обработчика кликов найдите позицию элемента относительно документа, вычтите 20 и используйте window.scrollTo:
var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));
Вот быстрый плагин jQuery для удобного отображения встроенных функций браузера:
$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };
...
$('.my-elements').ensureVisible();
После проб и ошибок я придумал эту функцию, также работает с iframe.
function bringElIntoView(el) {
var elOffset = el.offset();
var $window = $(window);
var windowScrollBottom = $window.scrollTop() + $window.height();
var scrollToPos = -1;
if (elOffset.top < $window.scrollTop()) // element is hidden in the top
scrollToPos = elOffset.top;
else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
if (scrollToPos !== -1)
$('html, body').animate({ scrollTop: scrollToPos });
}
Просто подсказка. Работает только с firefox
Мой пользовательский интерфейс имеет вертикальный список прокрутки в палитре Цель состояла в том, чтобы сделать текущий большой палец в центре значка. Я начал с одобренного ответа, но обнаружил, что было несколько попыток по-настоящему сосредоточить текущий большой палец. надеюсь, что это поможет кому-то другому.
Разметка:
<ul id='thumbbar'>
<li id='thumbbar-123'></li>
<li id='thumbbar-124'></li>
<li id='thumbbar-125'></li>
</ul>
JQuery
// scroll the current thumb bar thumb into view
heightbar = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar = $('#thumbbar').scrollTop();
$('#thumbbar').animate({
scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});
Простые 2 шага для прокрутки вниз до конца или вниз.
Шаг 1: получите полную высоту прокручиваемого (разговорного) div.
Шаг 2: примените scrollTop к этому прокручиваемому элементу (диалогу), используя значение, полученное на шаге 1.
var fullHeight = $('#conversation')[0].scrollHeight;
$('#conversation').scrollTop(fullHeight);
Вышеуказанные шаги должны быть применены к каждому добавлению в div разговора.
После попытки найти решение, которое обрабатывало бы каждое обстоятельство (варианты анимации прокрутки, отступа вокруг объекта, как только он прокручивается в поле зрения, работает даже в неясных обстоятельствах, таких как в 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 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 (другими словами, на элемент в dom с полосами прокрутки). По умолчанию используется окно, которое содержит элемент $ target и достаточно умное, чтобы выбрать окно iframe. Не забудьте указать $ в имени свойства.
options.padding - отступ в пикселях для добавления над или под объектом, когда он прокручивается в поле зрения. Таким образом, это не прямо на краю окна. По умолчанию 20.
options.instant - если задано значение true, jQuery animate не будет использоваться, и прокрутка мгновенно откроется в нужном месте. По умолчанию false.
options.animationOptions - любые параметры jQuery, которые вы хотите передать в функцию анимирования jQuery (см. http://api.jquery.com/animate/). При этом вы можете изменить продолжительность анимации или запустить функцию обратного вызова после завершения прокрутки. Это работает, только если для options.instant установлено значение false. Если вам нужна мгновенная анимация, но с обратным вызовом, установите options.animationOptions.duration = 0 вместо использования options.instant = true.