Триггерные события, когда окно прокручивается до определенных позиций
Я хотел бы вызвать функции, когда окно браузера выходит за пределы определенной точки
(например, пользователь прокрутил окно ниже 200px сверху
Есть ли какое-то событие, к которому я могу привязать, и как я могу проверить, насколько смещение от верхней части браузера до верхней части страницы?
Ответы
Ответ 1
Вы можете использовать onscroll
function testScroll(ev){
if(window.pageYOffset>400)alert('User has scrolled at least 400 px!');
}
window.onscroll=testScroll
Если вы хотите использовать jQuery-решение, вы можете использовать scroll.
Ответ 2
Популярный плагин для того, что вы описываете, jQuery Waypoints.
Если вы не хотите использовать плагин, существуют следующие механизмы:
$(window).scrollTop(); // returns pixel value
$(window).scroll(function () { /* code here */ });
Однако, поскольку событие scroll
срабатывает очень быстро, вы должны быть осторожны, чтобы поместить только код, который быстро выполняется внутри обработчика. Общей методикой является "дросселирование" скорости, с которой вы обрабатываете событие, проверяя, прошло ли определенное количество времени.
Ответ 3
Если вы не хотите использовать плагин, вы можете попробовать это
function isScrolledIntoView(elem)
{
//alert("method invoked");
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
Я использовал эту функцию для загрузки изображений как ленивой загрузки. Вызывается эта функция для прокрутки и затем отправляется запрос ajax на основе значения возвращаемого значения функции. это отправит запрос ajax, когда пользователь прокрутил нижнюю часть элемента (например, используется в качестве параметра в методе).
if(isScrolledIntoView($('.items:last'))){
//send the ajax request here
}
Это мой первый ответ на этом сайте.
Надеюсь, вы поймете