Apa cara yang tepat untuk mendapatkan posisi elemen di halaman relatif terhadap viewport (bukan dokumen). jQuery.offset
fungsinya tampak menjanjikan:
Dapatkan koordinat saat ini dari elemen pertama, atau setel koordinat setiap elemen, dalam kumpulan elemen yang cocok, relatif terhadap dokumen.
Tapi itu relatif terhadap dokumennya. Apakah ada metode setara yang mengembalikan offset relatif terhadap viewport?
Jawaban:
Lihat ke dalam plugin Dimensi, khususnya
scrollTop()
/scrollLeft()
. Informasi dapat ditemukan di http://api.jquery.com/scrollTop .sumber
Cara termudah untuk menentukan ukuran dan posisi elemen adalah dengan memanggil metode getBoundingClientRect () . Metode ini mengembalikan posisi elemen dalam koordinat viewport. Ia mengharapkan tidak ada argumen dan mengembalikan objek dengan properti kiri, kanan, atas , dan bawah . Properti kiri dan atas memberikan koordinat X dan Y dari sudut kiri atas elemen dan properti kanan dan bawah memberikan koordinat sudut kanan bawah.
element.getBoundingClientRect(); // Get position in viewport coordinates
Didukung di mana-mana.
sumber
getBoundingClientRect is not a function
$('#myElement')[0].getBoundingClientRect().top
(atau posisi lain)Berikut dua fungsi untuk mendapatkan tinggi halaman dan jumlah scroll (x, y) tanpa menggunakan plugin dimensi (membengkak):
sumber
jQuery.offset
perlu digabungkan denganscrollTop
danscrollLeft
seperti yang ditunjukkan pada diagram ini:Demo:
sumber
Berikut adalah fungsi yang menghitung posisi elemen saat ini dalam viewport:
Nilai yang dikembalikan dihitung seperti ini:
Pemakaian:
Demo:
sumber
Saya menemukan bahwa jawaban cballou tidak lagi berfungsi di Firefox mulai Januari 2014. Secara khusus,
if (self.pageYOffset)
tidak terpicu jika klien telah menggulir ke kanan, tetapi tidak ke bawah - karena0
ini adalah nomor palsu. Ini tidak terdeteksi untuk sementara waktu karena Firefox mendukungdocument.body.scrollLeft
/Top
, tetapi ini tidak lagi berfungsi untuk saya (di Firefox 26.0).Inilah solusi saya yang dimodifikasi:
Diuji dan berfungsi di FF26, Chrome 31, IE11. Hampir pasti bekerja pada versi yang lebih lama dari semuanya.
sumber