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

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

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