Как получить положение полосы прокрутки с помощью Javascript?

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

Вы можете использовать element.scrollTopи, element.scrollLeftчтобы получить вертикальное и горизонтальное смещение, соответственно, которое было прокручено. elementможет быть, document.bodyесли вы заботитесь о всей странице. Вы можете сравнить его element.offsetHeightи element.offsetWidth(опять же, elementможет быть тело), ​​если вам нужны проценты.

Я сделал это для <div>Chrome.

Элемент .scrollTop - это пиксели, скрытые в верхней части из-за прокрутки. Без прокрутки его значение равно 0.

Элемент .scrollHeight - это пиксели всего деления.

Элемент .clientHeight - это пиксели, которые вы видите в своем браузере.

var a = element.scrollTop;

будет позиция.

var b = element.scrollHeight - element.clientHeight;

будет максимальным значением для scrollTop .

var c = a / b;

будет процент прокрутки [от 0 до 1] .

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

возвращает массив с двумя целыми числами - [scrollLeft, scrollTop]

это вот так :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

Ответ на 2018 :

Лучший способ сделать это - использовать API Intersection Observer .

API Intersection Observer предоставляет способ асинхронно наблюдать изменения в пересечении целевого элемента с элементом-предком или с областью просмотра документа верхнего уровня.

Исторически, обнаружение видимости элемента или относительной видимости двух элементов по отношению друг к другу было трудной задачей, решения которой были ненадежными и склонными к тому, что браузер и сайты, к которым пользователь обращается, стали вялыми. К сожалению, по мере взросления сети потребность в такой информации возросла. Информация о пересечении необходима по многим причинам, таким как:

• Ленивая загрузка изображений или другого контента при прокрутке страницы.
• Реализация веб-сайтов с «бесконечной прокруткой», где все больше и больше контента загружается и отображается при прокрутке, чтобы пользователю не приходилось пролистывать страницы.
• Отчет о видимости рекламы с целью расчета доходов от рекламы.
• Решение о том, выполнять или нет задачи или процессы анимации, в зависимости от того, увидит ли пользователь результат.

Реализация обнаружения пересечений в прошлом включала в себя обработчики событий и циклы, вызывающие методы, такие как Element.getBoundingClientRect (), для создания необходимой информации для каждого затронутого элемента. Поскольку весь этот код выполняется в основном потоке, даже один из них может вызвать проблемы с производительностью. Когда сайт загружается с этими тестами, все может стать ужасно.

Смотрите следующий пример кода:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

Большинство современных браузеров поддерживают IntersectionObserver , но вы должны использовать polyfill для обратной совместимости.

если вы заботитесь о всей странице. Вы можете использовать это:

document.body.getBoundingClientRect().top

Если вы используете jQuery, то для вас есть идеальная функция: .scrollTop ()

документ здесь -> http://api.jquery.com/scrollTop/

примечание: вы можете использовать эту функцию, чтобы получить ИЛИ установить положение.

см. также: http://api.jquery.com/?s=scroll

Вот другой способ получить позицию прокрутки

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

Я думаю, что следующая функция может помочь получить значения координат прокрутки:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

Я получил эту идею из этого ответа с небольшим изменением.