Прокрутка – это обычное действие пользователя на веб-сайтах, и иногда полезно знать, как далеко пользователь прокрутил страницу. В этой статье мы рассмотрим несколько методов расчета процента прокрутки с помощью JavaScript. Мы предоставим примеры кода для каждого метода, чтобы вы могли выбрать тот, который лучше всего соответствует вашим потребностям.

Метод 1: использование свойств окна
Процент прокрутки можно рассчитать путем сравнения текущей позиции прокрутки (window.scrollY) с максимальной высотой прокрутки (document.documentElement.scrollHeight - window.innerHeight). Вот код:

function getScrollPercentage() {
  const scrollHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);
  return (scrollPosition / (scrollHeight - windowHeight)) * 100;
}

Метод 2: использование свойств элемента.
Если вы хотите отслеживать процент прокрутки внутри определенного элемента, вы можете использовать свойства scrollTopи scrollHeightэтого элемента.. Вот пример:

const element = document.getElementById('myElement');
function getScrollPercentage() {
  const scrollHeight = element.scrollHeight;
  const visibleHeight = element.clientHeight;
  const scrollPosition = element.scrollTop;
  return (scrollPosition / (scrollHeight - visibleHeight)) * 100;
}

Метод 3: использование Intersection Observer
API Intersection Observer позволяет эффективно отслеживать, виден ли элемент в области просмотра. Наблюдая за коэффициентом пересечения элемента, вы можете определить процент прокрутки. Вот как это можно сделать:

const targetElement = document.getElementById('myElement');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const scrollPercentage = entry.intersectionRatio * 100;
    // Use the scrollPercentage as needed
  });
});
observer.observe(targetElement);

В этой статье мы рассмотрели три различных метода получения процента прокрутки в JavaScript. Первый метод вычисляет процент прокрутки на основе свойств окна, второй метод фокусируется на конкретных свойствах элемента, а третий метод использует API Intersection Observer. В зависимости от ваших требований и контекста вашего приложения вы можете выбрать метод, который подходит вам лучше всего.

Не забудьте протестировать методы в различных сценариях, чтобы убедиться, что они работают должным образом. Теперь у вас есть множество возможностей отслеживать процент прокрутки в JavaScript, что позволяет создавать более интерактивные и привлекательные веб-интерфейсы для ваших пользователей.