Быстрый и надёжный хостинг на SSD-дисках от 165р в месяц   •   Реклама
Артём Мáлков

Как определить, на сколько процентов прокручена страница на jQuery/JavaScript?

21 дек0 комм

Несложная задачка, с которой я столкнулся не так давно и, кажется, впервые. Для её решения я прибёг к небольшим математическим операциям, которыми (и результатом в целом) с удовольствием с вами сегодня поделюсь.

Прежде чем писать код, давайте немного обратимся к теории.

Как посчитать, сколько процентов составляет одно число от другого?

Для того чтобы найти процентное соотношение (отношение) двух чисел, нужно отношение этих чисел умножить на 100.

Рассмотрим небольшой пример, приближенный к нашей задаче. Нам даны два значения: 900 (пусть это будет высота страницы) и 260 (прокрученное расстояние).

Найдем процентное соотношение этих чисел. По определению, получаем следующее выражение:

(260 / 900) * 100 = 28,8888888889

Округлим до 28,89% и получим результат, который показывает, сколько в процентах число 260 составляет от 900.

Условно, можно сказать, что 28,89% – это то, насколько (в процентах) была прокручена страница, имей она такие параметры (высоту и прокрученное расстояние).

Логика понятна? Если нет – пишите в комментариях. Именно такой подход с небольшой доработкой мы будем использовать в написании нашего кода.

Как определить, на сколько процентов прокручена страница на jQuery?

Итак, рассмотрев, я считаю, довольно конкретный пример, всё, что нам остаётся сделать – это написать код, который, в конечном итоге, выглядит следующим образом:

function getScrollPercentage() {

	/*
		
		$(window).scrollTop() - прокрученное расстояние от начала страницы до верхнего края окна браузера
		$(window).height() - высота окна браузера
		$(document).height() - высота страницы
		
	*/

	return (($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);

}

$(function() {

	$(window).on("scroll", function() {

		// Выполняем действие при каждой прокрутке страницы

		alert(getScrollPercentage()); // Выводим результат на экран

	});

});

Ранее я говорил о небольшой доработке. Здесь за неё отвечает часть:

 - $(window).height()

Дело в том, что прокрученное расстояние (в нашем случае) считается от начала страницы до верхнего края окна браузера и, спустившись до самого конца, вы не получите логичное значение в 100%. Вычтя из высоты страницы значение равное высоте окна браузера, мы дорабатываем этот момент.

Хорошо, мы получили процент, на который человек прокрутил страницу. Что дальше? Давайте выполним какое-нибудь действие, например, выведем сообщение:

function getScrollPercentage() {

	return (($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);

}

var scrollEvent = false; // Сообщение ещё не выводилось

$(function() {

	$(window).on("scroll", function() {
		
		if(!scrollEvent && getScrollPercentage() > 50) {
		  
			// Выводим сообщение, если ранее этого не происходило и страница прокручена больше чем на 50%
		  
			alert("Поздравляем, Вы просмотрели больше половины страницы!");
		  
			scrollEvent = true; // Сообщение вывелось
		  
		}

	});
	
});

Стоит обратить внимание, что здесь я добавил дополнительную проверку, которая выводит сообщение только один раз. Уберите её, чтобы понять, зачем так было сделано.

Вот, собственно, и всё. С помощью этого подхода можно поставить, например, цель Яндекс.Метрики или Google Аналитики, отследив тем самым одно из потенциально целевых действий – просмотр определённого процента страницы.

Как определить, на сколько процентов прокручена страница на JavaScript?

Не буду здесь особо ничего комментировать, всё по подобию с предыдущим вариантом:

function getScrollPercentage() {

	/*
		
		scrollTop - прокрученное расстояние от начала страницы до верхнего края окна браузера
		windowHeight - высота окна браузера
		documentHeight - высота страницы
		
	*/
    
	let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	let documentHeight = Math.max(
		document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight,
		document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight
	);
  
	return ((scrollTop / (documentHeight - windowHeight)) * 100);

}

document.addEventListener("DOMContentLoaded", function() {

	window.onscroll = function() {
		
		// Выполняем действие при каждой прокрутке страницы

		alert(getScrollPercentage()); // Выводим результат на экран
		
	};
	
});

И пример с выполнением какого-либо действия при достижении (преодолении) нужного процента:

function getScrollPercentage() {
    
	let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	let documentHeight = Math.max(
		document.body.scrollHeight, document.body.offsetHeight, document.body.clientHeight,
		document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight
	);
  
	return ((scrollTop / (documentHeight - windowHeight)) * 100);

}

var scrollEvent = false; // Сообщение ещё не выводилось

document.addEventListener("DOMContentLoaded", function() {

	window.onscroll = function() {
		
		if(!scrollEvent && getScrollPercentage() > 50) {
		  
			// Выводим сообщение, если ранее этого не происходило и страница прокручена больше чем на 50%
		  
			alert("Поздравляем, Вы просмотрели больше половины страницы!");
		  
			scrollEvent = true; // Сообщение вывелось
		  
		}
		
	};
	
});

Если что-то вам показалось непонятным или у вас есть свои способы определения прокрученного процента страницы – пишите об этом в комментариях, будет интересно посмотреть.

0
комментариев
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера