Як отримати позицію прокрутки за допомогою Javascript?

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

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

Я зробив це для <div>Chrome.

елемент .scrollTop - це пікселі, приховані вгорі завдяки прокрутці. Без прокрутки його значення дорівнює 0.

елемент .scrollHeight - це пікселі всього діла .

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

Відповідь на 2018 рік :

Найкращий спосіб зробити подібні дії - це використовувати API Intersection Observer .

API спостереження перехрестя забезпечує спосіб асинхронного спостереження за змінами перетину цільового елемента з елементом предка або з вікном перегляду документа верхнього рівня.

Історично виявляти видимість елемента або відносну видимість двох елементів по відношенню один до одного було складним завданням, рішення якого було ненадійним і схильним до того, щоб браузер і веб-сайти, до яких користувач отримує доступ, стали млявими. На жаль, у міру дозрівання мережі Інтернет потреба в такому вигляді інформації зросла. Інформація про перетин потрібна з багатьох причин, наприклад:

• Ліниво завантажується зображення або інший вміст на сторінці, прокручується.
• Впровадження веб-сайтів "нескінченної прокрутки", де все більше вмісту завантажується та надається під час прокрутки, щоб користувачеві не довелося гортати сторінки.
• Звітність про видимість реклами з метою підрахунку доходів від реклами.
• Вирішення, виконувати завдання чи анімаційні процеси, залежно від того, побачить результат чи ні користувач.

Реалізація виявлення перетину в минулому включала оброблювачів подій та циклів виклику циклів, таких як 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 , однак для зворотної сумісності слід використовувати полі- заливку .

якщо ви дбаєте про всю сторінку. Ви можете скористатися цим:

document.body.getBoundingClientRect().top

Якщо ви використовуєте jQuery, для вас є ідеальна функція: .scrollTop ()

doc тут -> http://api.jquery.com/scrollTop/

Примітка: Ви можете використовувати цю функцію для отримання АБО, щоб встановити позицію.

див. також: http://api.jquery.com/?s=scroll

Ось інший спосіб отримати позицію прокрутки

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

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

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

Я отримав цю ідею з цієї відповіді з невеликою зміною.