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

Question

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

Answer 1

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

Answer 2

Я сделал это для <div> на хром.

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

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

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

var a = element.scrollTop;

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

var b = element.scrollHeight - element.clientHeight;

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

var c = a / b;

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

Answer 3

Это вот так:)

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

Answer 4

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]

Answer 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.

Answer 6

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

document.body.getBoundingClientRect().top

Answer 7

Фрагменты

Только для чтения scrollYСвойство интерфейса Window возвращает количество пикселей, на которое документ прокручивается по вертикали в данный момент .

Answer 8

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

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

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

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

Answer 9

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

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

Answer 10

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

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

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

Answer 11

когда вы прокручиваете, вы получаете положение div

когда вы нажимаете на div, полоса прокрутки прокручивается на 500 по оси Y