как определить позицию ползунка прокрутки в javascript (процент и код)

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
09 марта 2025

Для определения позиции ползунка прокрутки в JavaScript можно использовать свойство scrollTop у элемента или pageYOffset у объекта window. Чтобы определить позицию ползунка в процентах относительно всего документа, необходимо учитывать высоту всего контента и высоту видимой области.

Пример кода:

function getScrollPercentage() {
    const scrolled = window.scrollY; // или document.documentElement.scrollTop
    const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercentage = (scrolled / totalHeight) * 100;
    return scrollPercentage;
}

// Использование функции для получения процента прокрутки
const scrollPercentage = getScrollPercentage();
console.log("Процент прокрутки страницы:", scrollPercentage);

В этом примере:

  1. scrolled - переменная, содержащая текущую позицию прокрутки страницы.
  2. totalHeight - переменная, содержащая общую высоту документа минус высота видимой области.
  3. scrollPercentage - переменная, содержащая вычисленный процент прокрутки.

После выполнения функции getScrollPercentage() вы получите значение процента, на котором находится ползунок прокрутки относительно всего контента.

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

0 0
Познакомьтесь с основами JavaScript бесплатно