Bagaimana cara menentukan tinggi dan posisi gulir jendela di jQuery?

179

Saya perlu mengambil ketinggian jendela dan gulir offset di jQuery, tapi saya belum beruntung menemukan ini di dokumen jQuery atau Google.

Saya 90% yakin ada cara untuk mengakses tinggi dan scrollTop untuk elemen (mungkin termasuk jendela), tapi saya tidak dapat menemukan referensi spesifik.

javascript jquery Satu krayon
sumber
2
Bagaimana tanpa jQuery?
Costa
@Costa Itu kemungkinan telah ditanyakan di tempat lain di StackOverflow, dan jika tidak layak menjadi pertanyaan tersendiri.
Satu Crayon

Jawaban:

296

Dari jQuery Docs:

const height = $(window).height();
const scrollTop = $(window).scrollTop();

http://api.jquery.com/scrollTop/
http://api.jquery.com/height/

Pim Jager
sumber
1
Angka yang saya lewatkan di dokumen; mencari mereka, tetapi organisasi mereka terus terang tidak masuk akal bagi saya (saya masih berpikir dalam Mootools, saya kira). Terima kasih!
Satu Krayon
Ini tidak berfungsi di peramban apa pun untuk jQuery 1.3.2 meskipun seharusnya ditambahkan di versi sebelumnya. Entah itu atau saya memiliki sesuatu yang salah dengan kode saya di sini
Philluminati
11
$ (window) .height () memberikan viewport tinggi dan bukan tinggi scroll. $ (dokumen) .height () memberikan ketinggian gulir yang sebenarnya, seperti yang disarankan Aidamina.
Jonathan
Saya sering kagum pada berapa banyak upvotes hal-hal sederhana seperti ini menarik, tetapi karena saya sudah melihat ini dua kali minggu ini, punya +1 lagi
Neil
41

dari http://api.jquery.com/height/ (Catatan: Perbedaan antara penggunaan untuk jendela dan objek dokumen)

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

dari http://api.jquery.com/scrollTop/

$(window).scrollTop() // return the number of pixels scrolled vertically
Aidamina
sumber
8

JS murni

window.innerHeight
window.scrollY

lebih dari 10x lebih cepat dari jquery (dan kode memiliki ukuran yang sama):

masukkan deskripsi gambar di sini

Di sini Anda dapat melakukan pengujian pada mesin Anda: https://jsperf.com/window-height-width

Kamil Kiełczewski
sumber
window.scrollY, dapatkan tinggi atas gulir
xgqfrms
6 
$(window).height()

$(window).width()

Ada juga plugin untuk jquery untuk menentukan lokasi elemen dan offset

http://plugins.jquery.com/project/dimensions

scrolling offset = properti offsetHeight suatu elemen

Joey V.
sumber
1
Terima kasih, Joseph. Ini bukan apa yang saya cari karena saya berusaha menghindari menggunakan plugin lain, tetapi Anda membuat saya mencari ke arah yang benar. Pada akhirnya, ternyata yang benar-benar saya butuhkan adalah '$ (window) .scrollTop ()' untuk mengetahui berapa banyak halaman yang telah bergulir melewati viewport untuk menyesuaikan elemen yang sesuai.
DA.
0

Jika Anda perlu menggulir ke titik elemen. Anda dapat menggunakan fungsi Jquery untuk menggulirnya ke atas / bawah.

$('html, body').animate({
                scrollTop: $("#div1").offset().top
            }, 'slow');
dush88c
sumber