js menentukan sama ada bar skrol telah mencapai bahagian bawah atau atas kemahiran page_javascript

Contoh dalam artikel ini menerangkan kaedah js untuk menentukan sama ada bar skrol telah mencapai bahagian bawah atau atas halaman. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kami sering melihat kesan kembali ke atas pada banyak tapak web Apabila bar skrol kami mencapai kedudukan yang ditentukan, pengembalian ke atas akan muncul secara automatik Di sini kami akan memperkenalkan kepada anda prinsip dan kaedah daripada merealisasikan kesan ini.

Apabila kawasan yang boleh dilihat adalah lebih kecil daripada ketinggian sebenar halaman, ia ditentukan bahawa bar skrol muncul, iaitu:

Salin kod Kod adalah seperti berikut:

jika (document.documentElement.clientHeight < document.documentElement.offsetHeight) tatal = benar ;

Untuk menggunakan document.documentElement , anda mesti menambah pengisytiharan di kepala halaman:

Salin kod Kod adalah seperti berikut:

Sebenarnya, kod ini tidak berfungsi kerana ia tidak mengambil kira satu isu, iaitu sempadan penyemak imbas Apabila kami mendapat offsetHeight halaman, sempadan penyemak imbas adalah 2 piksel, jadi clientHeight sentiasa kurang daripada offsetHeight dalam apa jua keadaan, yang menjadikannya benar walaupun tiada bar skrol, jadi kita perlu membetulkan ralat ini Kod harus ditukar seperti ini, tolak 4 piksel daripada offsetHeight, Iaitu:
.

Salin kod Kod adalah seperti berikut:

jika (document.documentElement.clientHeight < document.documentElement.offsetHeight- 4){
// Laksanakan skrip berkaitan.
}

Selain itu, kita perlu memahami di sini bahawa kod di atas adalah untuk menilai bar skrol mendatar Apa yang biasanya kita perlu menilai ialah skrol menegak Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

jika (document.documentElement.clientWidth < document.documentElement.offsetWidth- 4){
// Laksanakan skrip berkaitan.
}

Untuk menentukan sama ada bar skrol telah ditarik ke bahagian bawah halaman, anda boleh menggunakan kod berikut

Salin kod Kod adalah seperti berikut:

window.onscroll = function (){
var marginBot = 0;
jika (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop document.body.scrollTop)-document.documentElement.clientHeight;
} lain {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//buat sesuatu
}
}

Contoh 2

Menemuinya dalam talian. Ia agak serasi dengan pelayar. Perkara yang aneh ialah saya tidak dapat mencari sebarang maklumat yang berkaitan dalam dokumentasi. Siarkan kod.

Salin kod Kod adalah seperti berikut:

/********************
* 取視窗捲軸高度
******************/
函數 getScrollTop()
{
    varscrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    返回頂部滾動；
}

/********************
* 取視窗可視範圍的高度
*******************/
函數 getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     }
    其他
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    返回客戶端高度；
}
/********************
* 取文檔內容實際高度
*******************/
函式 getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  函數測試(){
 if (getScrollTop() getClientHeight()==getScrollHeight()){
  Alert("底部到達");
 }其他{
  Alert("沒有到達底部");
 }
}

Ergänzung:

DTD deklariert:

IE
document.documentElement.scrollHeight Die Höhe aller Inhalte im Browser, document.body.scrollHeight Die Höhe aller Inhalte im Browser
document.documentElement.scrollTop Die Höhe des Scroll-Teils des Browsers, document.body.scrollTop, ist immer 0
document.documentElement.clientHeight Die Höhe des sichtbaren Teils des Browsers, document.body.clientHeight Die Höhe aller Inhalte im Browser

FF
document.documentElement.scrollHeight Die Höhe aller Inhalte im Browser, document.body.scrollHeight Die Höhe aller Inhalte im Browser
document.documentElement.scrollTop Die Höhe des Scroll-Teils des Browsers, document.body.scrollTop, ist immer 0
document.documentElement.clientHeight ist die Höhe des sichtbaren Teils des Browsers, document.body.clientHeight ist die Höhe aller Inhalte im Browser

Chrom
document.documentElement.scrollHeight ist die Höhe aller Inhalte im Browser, document.body.scrollHeight ist die Höhe aller Inhalte im Browser
document.documentElement.scrollTop ist immer 0, document.body.scrollTop Höhe des Browser-Bildlaufteils
document.documentElement.clientHeight Die Höhe des sichtbaren Teils des Browsers, document.body.clientHeight Die Höhe aller Inhalte im Browser

DTD nicht deklariert:

IE
document.documentElement.scrollHeight ist die Höhe des sichtbaren Teils des Browsers, document.body.scrollHeight ist die Höhe aller Inhalte im Browser
document.documentElement.scrollTop ist immer 0, document.body.scrollTop Höhe des Browser-Bildlaufteils
document.documentElement.clientHeight ist immer 0, document.body.clientHeight ist die Höhe des sichtbaren Teils des Browsers

FF
document.documentElement.scrollHeight ist die Höhe des sichtbaren Teils des Browsers, document.body.scrollHeight ist die Höhe aller Inhalte im Browser
document.documentElement.scrollTop ist immer 0, document.body.scrollTop ist die Höhe des Browser-Bildlaufteils
document.documentElement.clientHeight ist die Höhe aller Inhalte im Browser, document.body.clientHeight ist die Höhe des sichtbaren Teils des Browsers

Chrom
document.documentElement.scrollHeight ist die Höhe des sichtbaren Teils des Browsers, document.body.scrollHeight ist die Höhe aller Inhalte im Browser
document.documentElement.scrollTop ist immer 0, document.body.scrollTop ist die Höhe des Browser-Bildlaufteils
document.documentElement.clientHeight ist die Höhe aller Inhalte im Browser, document.body.clientHeight ist die Höhe des sichtbaren Teils des Browsers

Die Höhe aller Inhalte im Browser ist die Höhe des gesamten Rahmens des Browsers, einschließlich der Summe der Höhen des Teils, in dem die Bildlaufleiste ausgerollt ist, des sichtbaren Teils und des verborgenen Teils unten

Die Höhe des gescrollten Teils des Browsers ist die Höhe der Bildlaufleiste, also die Höhe der visuellen Oberseite von der Oberseite des gesamten Objekts.
Nachdem wir die oben genannten Parameter verstanden haben, können wir einen Scrolleffekt erstellen, der mit den Browsern IE, FF und Chrome kompatibel ist.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.