Artikel ini menjelaskan metode JS untuk menentukan apakah bilah gulir telah mencapai bagian bawah atau atas halaman. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Kami sering melihat banyak situs web yang kembali ke efek teratas adalah bahwa ketika kami menggulir bilah ke posisi yang ditentukan, itu akan kembali ke atas, jika tidak ia akan disembunyikan secara otomatis. Izinkan saya memperkenalkan prinsip dan metode penerapan efek ini.
Ketika area yang terlihat lebih kecil dari ketinggian halaman yang sebenarnya, ditentukan bahwa bilah gulir muncul, yaitu:
Salinan kode adalah sebagai berikut: if (document.documentelement.clientHeight <document.documentelement.offsetHeight) scroll = true;
Untuk menggunakan Document.documentElement, Anda harus menambahkan deklarasi di kepala halaman:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Bahkan, kode ini tidak berfungsi karena tidak mempertimbangkan masalah, yaitu perbatasan browser. Ketika kita mendapatkan ketinggian halaman offsetheight, itu termasuk perbatasan browser. Perbatasan browser adalah 2 piksel, jadi dalam hal apa pun ClientHeight selalu lebih kecil dari OffsetHeight, yang membuatnya benar bahkan tanpa bilah gulir. Karena itu, kita perlu memperbaiki kesalahan ini. Kode harus diubah seperti ini dan kurangi 4 piksel pada OffsetHeight, yaitu:
Salin kode kode sebagai berikut: if (document.documentelement.clientHeight <document.documentelement.offsetHeight-4) {
// Jalankan skrip terkait.
}
Juga, kita perlu mencari tahu di sini bahwa kode di atas menilai bilah gulir horizontal. Kita biasanya perlu menilai gulungan vertikal, kodenya adalah sebagai berikut:
Salin kode sebagai berikut: if (document.documentelement.clientwidth <document.documentelement.offsetWidth-4) {
// Jalankan skrip terkait.
}
Untuk menentukan apakah bilah gulir telah ditarik ke bagian bawah halaman, Anda dapat menggunakan kode berikut
Salin kode sebagai berikut: window.onscroll = function () {
var marginbot = 0;
if (document.documentelement.scrolltop) {
marginbot = document.documentelement.scrollHeight (document.documentelement.scrolltop+document.body.scrolltop) -document.documentelement.clientHeight;
} kalau tidak {
marginbot = document.body.scrollHeight document.body.scrolltop- document.body.clientHeight;
}
if (marginbot <= 0) {
// Lakukan sesuatu
}
}
Contoh 2
Mencarinya secara online. Sangat kompatibel dengan browser. Anehnya, saya tidak menemukan informasi yang relevan dalam dokumen. Posting kode.
Salin kode sebagai berikut:/**********************
* Ambil Tinggi Bar Gulir Jendela
************************/
fungsi getscrolltop ()
{
var scrolltop = 0;
if (document.documentelement && document.documentelement.scrolltop)
{
scrolltop = document.documentelement.scrolltop;
}
lain jika (document.body)
{
scrolltop = document.body.scrolltop;
}
mengembalikan scrolltop;
}
/*****************************
* Ambil ketinggian rentang visual jendela
***************************
fungsi getClientHeight ()
{
var clientHeight = 0;
if (document.body.clientheight && document.documentelement.clientHeight)
{
var clientHeight = (document.body.clientHeight <document.documentelement.clientHeight)? document.body.clientHeight: document.documentelement.clientHeight;
}
kalau tidak
{
var clientHeight = (document.body.clientHeight> document.documentelement.clientHeight)? document.body.clientHeight: document.documentelement.clientHeight;
}
kembalikan klienheight;
}
/*****************************
* Ambil ketinggian sebenarnya dari konten dokumen
***************************
fungsi getscrollheight ()
{
return math.max (document.body.scrollheight, document.documentelement.scrollheight);
}
function test () {
if (getScrollTop ()+getClientHeight () == getScrollHeight ()) {
waspada ("mencapai bagian bawah");
}kalau tidak{
waspada ("tidak mencapai bagian bawah");
}
}
Mengisi kembali:
DTD telah menyatakan:
YAITU
Document.DocumentElement.ScrollHeight Semua Tinggi Konten Browser, Document.Body.ScrollHeight Semua Tinggi Konten Browser
document.documentelement.scrolltop browser menggulir tinggi bagian, document.body.scrolltop selalu 0
document.documentelement.clientHeight Tinggi bagian yang terlihat dari browser, document.body.clientHeight ketinggian konten browser
Ff
Document.DocumentElement.ScrollHeight Semua Tinggi Konten Browser, Document.Body.ScrollHeight Semua Tinggi Konten Browser
document.documentelement.scrolltop browser menggulir tinggi bagian, document.body.scrolltop selalu 0
document.documentelement.clientHeight Tinggi bagian yang terlihat dari browser, document.body.clientHeight ketinggian konten browser
Chrome
Document.DocumentElement.ScrollHeight Semua Tinggi Konten Browser, Document.Body.ScrollHeight Semua Tinggi Konten Browser
document.documentelement.scrolltop selalu 0, document.body.scrolltop browser gulir tinggi bagian
document.documentelement.clientHeight Tinggi bagian yang terlihat dari browser, document.body.clientHeight ketinggian konten browser
DTD tidak dinyatakan:
YAITU
document.documentelement.scrollheight ketinggian bagian yang terlihat browser, document.body.scrollheight ketinggian semua konten browser
document.documentelement.scrolltop selalu 0, document.body.scrolltop browser gulir tinggi bagian
document.documentelement.clientHeight selalu 0, document.body.clientHeight ketinggian bagian yang terlihat browser
Ff
document.documentelement.scrollheight ketinggian bagian yang terlihat browser, document.body.scrollheight ketinggian semua konten browser
document.documentelement.scrolltop selalu 0, document.body.scrolltop browser gulir tinggi bagian
document.documentelement.clientheight ketinggian semua konten browser, document.body.clientHeight ketinggian bagian yang terlihat browser
Chrome
document.documentelement.scrollheight ketinggian bagian yang terlihat browser, document.body.scrollheight ketinggian semua konten browser
document.documentelement.scrolltop selalu 0, document.body.scrolltop browser gulir tinggi bagian
document.documentelement.clientheight ketinggian semua konten browser, document.body.clientHeight ketinggian bagian yang terlihat browser
Ketinggian semua konten browser adalah ketinggian seluruh kerangka browser, termasuk jumlah ketinggian bilah gulir bagian gulungan + bagian visual + bagian tersembunyi di bagian bawah
Ketinggian bagian gulir browser adalah bilah gulir menggulung bagian dari ketinggian untuk melihat ketinggian bagian atas seluruh objek.
Setelah memahami parameter di atas, kita dapat membuat efek gulir yang kompatibel dengan IE, FF, dan browser chrome.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.