Появление элемента в области просмотра браузера

Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jQuery scrollTop(), height(), outerHeight() и offset().

$(window).scroll(function(){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('элемент').offset().top;
	var eh = $('элемент').outerHeight();
	var dh = $(document).height();   
	if (wt + wh >= et || wh + wt == dh || eh + et < wh){
		console.log('Элемент показан');
	}
});
JS

В середине сайта есть блок <div class="active">...</div>, как только до него доскролить в нем запускается анимация, но только один раз.

...

<div class="active">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

...
HTML
var block_show = false;

function scrollTracking(){
	if (block_show) {
		return false;
	}

	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('.active').offset().top;
	var eh = $('.active').outerHeight();
	var dh = $(document).height();   
 
	if (wt + wh >= et || wh + wt == dh || eh + et < wh){
		block_show = true;
		
		// Код анимации
		$('.active div:eq(0)').show('fast', function(){
			$(this).next().show('fast', arguments.callee);
		});
	}
}

$(window).scroll(function(){
	scrollTracking();
});
	
$(document).ready(function(){ 
	scrollTracking();
});
JS

Следующий пример отслеживает появление и пропадание блока из области видимости браузера.

...

<div class="active">Active</div>

...
HTML
var block_show = null;

function scrollTracking(){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('.active').offset().top;
	var eh = $('.active').outerHeight();

	if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
		if (block_show == null || block_show == false) {
			console.log('Блок active в области видимости');
		}
		block_show = true;
	} else {
		if (block_show == null || block_show == true) {
			console.log('Блок active скрыт');
		}
		block_show = false;
	}
}

$(window).scroll(function(){
	scrollTracking();
});
	
$(document).ready(function(){ 
	scrollTracking();
});
JS

Ещё один пример показывает когда элемент полстью находится в области видимости.

var block_show = null;

function scrollTracking(){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('.active').offset().top;
	var eh = $('.active').outerHeight();
	
	if (et >= wt && et + eh <= wh + wt){
		if (block_show == null || block_show == false) {
			$('#console').html('Блок active полностью виден');
		}
		block_show = true;
	} else {
		if (block_show == null || block_show == true) {
			$('#console').html('');
		}
		block_show = false;
	}
}

$(window).scroll(function(){
	scrollTracking();
});
	
$(document).ready(function(){ 
	scrollTracking();
});
JS

Определить, виден ли пользователю элемент по определенному событию можно с помощью функций:

Функция is_shown() возвращает true, если элемент находится в области просмотра частично или полностью.

function is_shown(target) {
	var wt = $(window).scrollTop(); 
	var wh = $(window).height();    
	var eh = $(target).outerHeight();  
	var et = $(target).offset().top;
 
	if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
		return true;
	} else {
		return false;    
	}
}

if (is_shown('.active')) {
	console.log(true);
}
JS

Вторая функция возвращает true, только если элемент полностью виден.

function is_fully_shown(target) {
	var wt = $(window).scrollTop(); 
	var wh = $(window).height();    
	var eh = $(target).height();  
	var et = $(target).offset().top;

	if (et >= wt && et + eh <= wh + wt){
		return true;
	} else {
		return false;    
	}
}

if (is_fully_shown('.active')) {
	console.log(true);
}
JS
16.02.2019, обновлено 23.11.2019
26581

Комментарии 3

Сергей усатюк Сергей усатюк
26 марта 2020 в 13:43
0
Спасибо, полезная статья, но я хотел бы узнать как это все проделать если на странице несколько блоков Active?
  <div class="block">Content</div>
<div class="active">Active</div>
<div class="block">Content</div>
<div class="block">Content</div>
<div class="active">Active</div>
<div class="block">Content</div>
<div class="block">Content</div>
<div class="active">Active</div>
<div class="block">Content</div>
Владимир Мицкевич Владимир Мицкевич
27 июля 2020 в 13:10
+1
function is_fully_shown(target) {
var wt = $(window).scrollTop();
var wh = $(window).height();
var eh = $(target).height();
var et = $(target).offset().top;

if (et >= wt && et + eh <= wh + wt){
return true;
} else {
return false;
}
}
$(window).scroll(function(){
$('.active').each(function(){
if (is_fully_shown($(this))) {
// ...
}
});
});

$(document).ready(function(){
$('.active').each(function(){
if (is_fully_shown($(this))) {
// ...
}
});
});
Артём Мосс Артём Мосс
30 мая 2020 в 19:51
0
Почему в примере про частично отображаемый блок, не работает второй раз события, но это происходит именно в мобильном браузере (проверял на встроенном android и последний google chrome для мобильного)

, чтобы добавить комментарий.

Другие публикации

Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
23568
+2
Работа с cookie в JavaScript
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений...
14424
+5
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
22068
+25
Получить координаты курсора
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над...
19268
0
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
43856
+18
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
29899
+11