Bagaimana cara mendapatkan posisi scrollbar dengan Javascript?

Saya mencoba mendeteksi posisi bilah gulir browser dengan JavaScript untuk memutuskan di mana di halaman tampilan saat ini. Dugaan saya adalah bahwa saya harus mendeteksi di mana ibu jari di trek, dan kemudian ketinggian ibu jari sebagai persentase dari total tinggi trek. Apakah saya terlalu memperumitnya, atau apakah JavaScript menawarkan solusi yang lebih mudah dari itu? Adakah ide yang bijak-kode?

Anda dapat menggunakan element.scrollTopdan element.scrollLeftuntuk mendapatkan offset vertikal dan horizontal, masing-masing, yang telah digulir. elementbisa jadi document.bodyjika Anda peduli dengan seluruh halaman. Anda dapat membandingkannya dengan element.offsetHeightdan element.offsetWidth(sekali lagi, elementmungkin tubuh) jika Anda membutuhkan persentase.

Saya melakukan ini untuk <div>di Chrome.

elemen .scrollTop - adalah piksel yang disembunyikan di atas karena gulir. Tanpa gulir nilainya adalah 0.

elemen .scrollHeight - adalah piksel seluruh div.

elemen .clientHeight - adalah piksel yang Anda lihat di browser Anda.

var a = element.scrollTop;

akan menjadi posisi.

var b = element.scrollHeight - element.clientHeight;

akan menjadi nilai maksimum untuk scrollTop .

var c = a / b;

akan menjadi persentase gulir [dari 0 ke 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];
    }
}

mengembalikan array dengan dua bilangan bulat- [scrollLeft, scrollTop]

seperti ini :)

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

Jawaban untuk 2018 :

Cara terbaik untuk melakukan hal-hal seperti itu adalah dengan menggunakan Intersection Observer API .

Intersection Observer API menyediakan cara untuk secara asinkron mengamati perubahan di persimpangan elemen target dengan elemen leluhur atau dengan viewport dokumen tingkat atas.

Secara historis, mendeteksi visibilitas suatu elemen, atau visibilitas relatif dari dua elemen dalam hubungannya satu sama lain, merupakan tugas yang sulit karena solusinya tidak dapat diandalkan dan cenderung menyebabkan peramban dan situs yang diakses pengguna menjadi lamban. Sayangnya, ketika web telah matang, kebutuhan akan informasi semacam ini telah berkembang. Informasi titik-temu diperlukan karena berbagai alasan, seperti:

• Pemuatan gambar atau konten lain dengan malas seperti halaman digulir.
• Menerapkan situs web "pengguliran tak terbatas", di mana semakin banyak konten dimuat dan ditampilkan saat Anda menggulir, sehingga pengguna tidak perlu membolak-balik halaman.
• Pelaporan visibilitas iklan untuk menghitung pendapatan iklan.
• Memutuskan apakah akan melakukan tugas atau proses animasi berdasarkan pada apakah pengguna akan melihat hasilnya atau tidak.

Menerapkan deteksi persimpangan di masa lalu melibatkan event handler dan loop memanggil metode seperti Element.getBoundingClientRect () untuk membangun informasi yang diperlukan untuk setiap elemen yang terpengaruh. Karena semua kode ini berjalan di utas utama, bahkan salah satunya dapat menyebabkan masalah kinerja. Ketika sebuah situs dimuat dengan tes-tes ini, semuanya bisa menjadi sangat buruk.

Lihat contoh kode berikut:

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);

Sebagian besar browser modern mendukung IntersectionObserver , tetapi Anda harus menggunakan polyfill untuk kompatibilitas ke belakang.

jika Anda peduli untuk seluruh halaman. Anda bisa menggunakan ini:

document.body.getBoundingClientRect().top

Jika Anda menggunakan jQuery, ada fungsi yang sempurna untuk Anda: .scrollTop ()

doc di sini -> http://api.jquery.com/scrollTop/

catatan: Anda dapat menggunakan fungsi ini untuk mengambil ATAU mengatur posisi.

lihat juga: http://api.jquery.com/?s=scroll

Berikut cara lain untuk mendapatkan posisi gulir

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

Saya pikir fungsi berikut dapat membantu memiliki nilai koordinat gulir:

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

Saya mendapat ide ini dari jawaban ini dengan sedikit perubahan.