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

16.02.2019

51198

Отследить появление блока при скроллинге можно с помощью события 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('Элемент показан');
	}
});

Запуск анимации при скроллинге

В середине сайта есть блок <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();
});

Отслеживание видимости элемента

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

...

<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();
});

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

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();
});

Проверка, находится ли элемент в области просмотра

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

Функция 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);
}

Вторая функция возвращает 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);
}

16.02.2019, обновлено 23.11.2019

51198

#CSS #HTML #jQuery

19 6

Предыдущая запись Автоматическое изменение высоты iframe по его содержимому на jQuery

Следующая запись Появление элементов по очереди

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

Сергей усатюк

26 марта 2020 в 13:43

Спасибо, полезная статья, но я хотел бы узнать как это все проделать если на странице несколько блоков 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

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

Почему в примере про частично отображаемый блок, не работает второй раз события, но это происходит именно в мобильном браузере (проверял на встроенном android и последний google chrome для мобильного)

Ответить

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