$ (window) .scrollTop () vs. $ (document) .scrollTop ()

184

Apa perbedaan antara:

$(window).scrollTop()

dan

$(document).scrollTop()

Terima kasih.

— perancis
sumber

2

'html' atau 'tubuh' untuk setter (tergantung pada browser) ... 'jendela' untuk pengambil ... cf Fiddle: jsfiddle.net/molokoloco/uCrLa

— molokoloco

149

Keduanya akan memiliki efek yang sama .

Namun, seperti yang ditunjukkan dalam komentar: $(window).scrollTop()didukung oleh lebih banyak browser web daripada $('html').scrollTop().

— Bodman
sumber

3

ia mengembalikan 0 di IE8 (meskipun halaman saya dalam mode quirks, yang mungkin memainkan faktor)

— Greg Ogle

38

$ ('html'). scrollTop () bukan cross-browser (sebagai setter tidak berfungsi setidaknya di Chrome). Cara crossbrowser yang paling banyak dilakukan saat ini adalah: $ (window) .scrollTop () sebagai pengambil, $ ('html, body'). ScrollTop (offset) sebagai setter.

— Georgii Ivankin

6

Menurut referensi ini , tanpa argumen scrollToptidak menggulir ke mana pun, tetapi hanya mengembalikan lokasi gulir saat ini.

— ATAU Mapper

3

@ d2burke scrollTop()adalah pengambil dan scrollTop(value)penyetel. scrollTop()tanpa argumen tidak mengubah posisi gulir.

1

@ M98 window.scrollTo (x, y)

— Bodman

36

Pertama, Anda perlu memahami perbedaan antara windowdan document. The windowobjek adalah tingkat atas objek sisi klien. Tidak ada yang di atas windowobjek. JavaScript adalah bahasa yang berorientasi objek. Anda mulai dengan objek dan menerapkan metode pada propertinya atau properti dari grup objeknya. Misalnya, documentobjek adalah objek windowobjek. Untuk mengubah document'warna latar belakang s, Anda akan mengatur document' s bgcolorproperti.

window.document.bgcolor = "red"

Untuk menjawab pertanyaan Anda, Tidak ada perbedaan dalam hasil akhir antara windowdandocument scrollTop . Keduanya akan memberikan output yang sama.

Lihat contoh kerja di http://jsfiddle.net/7VRvj/6/

Dalam penggunaan umum documentterutama untuk mendaftar acara dan menggunakan windowuntuk melakukan hal-hal seperti scroll, scrollTop, dan resize.

— Hussein
sumber

Tidak ada perbedaan dalam hasil akhirnya. Keduanya akan memberikan output yang sama.

— Hussein

Tampaknya tidak, beberapa browser tidak mendukung gulir jendela karena objek jendela mungkin bukan objek yang meluap.

— Bodman

11

Browser apa yang tidak mendukung jendela, spesifik. Berikut ini adalah contoh jsfiddle.net/7VRvj/4 . Periksa di semua browser dan beri tahu saya browser mana yang tidak berfungsi.

— Hussein

4

Cara browser lintas melakukan ini adalah

var top = ($(window).scrollTop() || $("body").scrollTop());

— amachree tamunoemi
sumber

1

Catatan: $("body").scrollTop()selalu kembalikan 0 di Google Chrome.

— Jonathan Parent Lévesque

2

$("body").scrollTop()sudah usang, tidak berfungsi di Chrome atau FF lagi . Ini akan mengembalikan 0

— Jorge Lazo

0

Saya baru saja mengalami beberapa masalah serupa scrollTop dijelaskan di sini.

Pada akhirnya saya menyiasati Firefox dan IE dengan menggunakan pemilih$('*').scrollTop(0);

Tidak sempurna jika Anda memiliki elemen yang tidak ingin Anda efek tetapi ada di sekitar perbedaan Dokumen, Tubuh, HTML, dan Jendela. Jika itu membantu ...

— Tapiochre
sumber

20

Anda tidak boleh menggunakan * dengan cara ini (pada kenyataannya, hindari * sama sekali). Alih-alih menargetkan satu elemen, Anda memengaruhi seluruh DOM. Performa luar biasa. Selektor harus setepat mungkin.

— Vlad

2

Saya pribadi selalu menggunakan $("html,body").scrollTop(val)- tidak pernah mengalami masalah

— Roi