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

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


javascript browser scroll dom-events
person Paul    schedule 20.03.2010    source источник

Ответы (9)


arrow_upward
252
arrow_downward

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

person Max Shawabkeh    schedule 20.03.2010
comment
Какой браузер вы используете? Получение тела выполняется по-разному в разных браузерах (element и document.body были лишь примерами). Подробнее см. howtocreate.co.uk/tutorials/javascript/browserwindow. - person Max Shawabkeh; 20.03.2010
comment
Я получил его, чтобы получить правильное значение в Firefox 3.6 с window.pageYOffset, но ничего не могу заставить работать в IE7. Пробовал window.pageYOffset, document.body.scrollTop, document.documentElement.scrollTop, element.scrollTop - person Paul; 20.03.2010
comment
document.body.scrollLeft - это то, что мне нужно :) - person Jorge Orpinel Pérez; 10.02.2014
comment
scrollTop работал у меня только тогда, когда я добавлял скобки ... $ (. scrollBody) .scrollTop () - person maia; 05.01.2017
comment
Если вы имеете дело с элементом window, вы можете использовать window.scrollY вместо window.scrollTop - person Janis Jansen; 04.08.2017
comment
Свойство scrollTop не является стандартом W3C. - person Green; 05.02.2018
comment
Я думаю, что в большинстве современных браузеров положение прокрутки не установлено на document.body - сейчас оно обычно устанавливается на document.documentElement. См. bugs.chromium.org/p/chromium/issues/detail?id = 157855 для перехода Chrome. - person fzzfzzfzz; 03.05.2018
comment
Я не рекомендую scrollTop. У него есть известные проблемы, и он часто не работает. Я удивлен, увидев, как много людей полагаются на эту непостоянную команду - person Ian S; 20.04.2020

arrow_upward
156
arrow_downward

Я сделал это для <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].

person Gatsby    schedule 15.10.2012
comment
Это почти правильно. для var b вы должны вычитать window.innerHeight, а не element.clientHeight. - person Kahless; 19.03.2016
comment
Спасибо Old Sport! - person hngr18; 29.06.2021
comment
очень полезно +1 - person negi; 08.07.2021

arrow_upward
59
arrow_downward 

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]

person kennebec    schedule 20.03.2010
comment
Было бы здорово показать, как использовать эту функцию на примере. - person user18490; 31.07.2014
comment
Думаю, вы можете использовать это lastscroll = getScroll (); window.scrollTo (lastscroll [0], lastscroll [1]); - person Dinesh Rajan; 14.12.2014
comment
Отлично работает, но я изменил возврат к объекту с помощью клавиш x и y, так как это имеет для меня немного больше смысла. - person xd6_; 24.07.2015
comment
Отредактировано после комментария @ user18490. - person Davide Cannizzo; 03.01.2018
comment
ReferenceError: не удается найти переменную: элемент - person Jonny; 16.09.2018
comment
@DineshRajan, вызывающий getScroll (), предполагает, что функция def. это getScroll = function () {} без документа. Не знаю почему но работает и без него. - person Timo; 05.02.2021

arrow_upward
44
arrow_downward

это вот так :)

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});
person Brayan Pastor    schedule 23.04.2018
comment
Для ясности this в этом контексте упоминается window. scrollY является собственностью window - person Stefan; 08.02.2021

arrow_upward
16
arrow_downward

Ответ за 2018 год:

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

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

person str    schedule 18.01.2018

arrow_upward
13
arrow_downward

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

document.body.getBoundingClientRect().top

person lemospy    schedule 26.09.2019
comment
вместо этого используйте document.body - person Daniel Dez; 13.05.2020

arrow_upward
5
arrow_downward

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

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

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

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

person Simon the Salmon    schedule 08.07.2013
comment
Зачем отвечать на вопрос о JS с помощью библиотеки для JS, когда это вполне возможно и даже удобно сделать на сыром JS? Вы просто просите его добавить дополнительное время загрузки, а также использовать место для чего-то совершенно ненужного. Кроме того, с каких пор javascript стал означать JQuery? - person ; 03.04.2016
comment
если вы спросите индивидуально, мне никогда не нравился jQuery, и я не ответил на этот вопрос, но в Vanilla JS уже есть ответы, данные другими ребятами, тогда какая проблема, если кто-то добавил вкусную специю в эту ветку (он уже упоминал, что если вы используете jQuery) - person Ravinder Payal; 03.04.2016
comment
@ R01010010 это потому, что в наши дни JQuery бесполезен и контрпродуктивен, все функции JQuery легко реализуются с помощью VanilaJS, также вы становитесь зависимыми от того, что находится внутри JQuery, с новыми функциями, доступными в VanillsaJS, вы, как программист, не будете обновлять, просто в качестве примера , теперь в VanillaJS есть новый API под названием fetch, который заменил старый XHR, если вы только что были в мире JQuery, никогда не увидите преимуществ fetch и продолжите использовать jQuery.ajax (). Мое личное мнение таково, что люди, которые продолжают используя JQuery, это потому, что они перестали учиться. Также VanillaJS быстрее vanilla-js.com - person John Balvin Arias; 06.06.2018
comment
@JohnBalvinArias говорит о fetch, что происходит с ie11 или даже Edge? - person Ben; 02.11.2018
comment
Поправьте меня, если я ошибаюсь, но fetch не работает должным образом на современных ie, и до сих пор широко используется. Если бы я использовал jquery, меня вряд ли побудили бы двигаться дальше - person Ben; 02.11.2018
comment
@Ben откуда вы берете факт, т.е. широко используется? Кроме того, если вы хотите поддерживать, например, я бы сказал, что JQuery лучше, потому что собственный xhr немного беспорядочный, с другой стороны, это пустая трата времени, все время беспокоиться о том, поддерживает ли что-то, по крайней мере, для меня я просто пытаюсь использовать самые последние версии API и посмотреть, поддерживается ли он хотя бы в Chrome и Firefox. - person John Balvin Arias; 02.11.2018

arrow_upward
3
arrow_downward

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

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

arrow_upward
1
arrow_downward

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

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

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

person AmerllicA    schedule 23.02.2020