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

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

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

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

элемент.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)
});

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

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

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

Смотрите также:http://api.jquery.com/?s=scroll

ответ на 2018 год:

лучший способ сделать это-использовать Intersection Observer 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.