Как получить позицию прокрутки в Javascript?

Ответ 1

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

Ответ 2

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

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

element .scrollHeight - это пиксели всего div.

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

var a = element.scrollTop;

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

var b = element.scrollHeight - element.clientHeight;

будет максимум для scrollTop.

var c = a / b;

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

Ответ 3

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];
    }
}

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

Ответ 4

это так :)

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

Ответ 5

Ответ на 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 для обратной совместимости.

Ответ 6

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

doc here → http://api.jquery.com/scrollTop/

Примечание: вы можете использовать эту функцию для извлечения или установки позиции.

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

Ответ 7

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

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

Ответ 8

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

document.querySelector("body").getBoundingClientRect().top