Как получить позицию полосы прокрутки с помощью Javascript?

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

115
browser dom-events javascript scroll

6 ответов

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

153

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

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

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

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

var a = element.scrollTop;

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

var b = element.scrollHeight - element.clientHeight;

будет максимум значение scrollTop.

var c = a / b;

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

97
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]

37

это так:)

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

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

doc здесь ->http://api.jquery.com/scrollTop/

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

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

4

ответ на 2018:

лучший способ сделать такие вещи - использовать API наблюдателя пересечения.

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

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

  • Lazy - загрузка изображений или другого контента в виде прокрутки страницы.
  • реализация веб-сайтов" бесконечная прокрутка", где все больше и больше контента загружается и отображается при прокрутке, так что пользователь не приходится листать страницы.
  • отчетность о видимости рекламы для того, чтобы рассчитать доходы от рекламы.
  • решение о том, выполнять ли задачи или анимационные процессы на основе того, будет ли пользователь видеть результат.

реализация обнаружения пересечений в прошлом событии обработчики и циклы, вызывающие такие методы, как Элемент.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.

4