js bestimmt, ob die Bildlaufleiste den unteren oder oberen Rand der page_javascript-Fähigkeiten erreicht hat

Das Beispiel in diesem Artikel beschreibt die js-Methode, um festzustellen, ob die Bildlaufleiste den unteren oder oberen Rand der Seite erreicht hat. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Auf vielen Websites sehen wir häufig einen Rückkehr-nach-oben-Effekt, wenn unsere Bildlaufleiste die angegebene Position erreicht. Andernfalls wird das Prinzip und die Methode automatisch ausgeblendet diesen Effekt zu realisieren.

Wenn der sichtbare Bereich kleiner als die tatsächliche Höhe der Seite ist, wird festgestellt, dass eine Bildlaufleiste angezeigt wird, das heißt:

Code kopieren Der Code lautet wie folgt:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true ;

Um document.documentElement zu verwenden, müssen Sie die Deklaration am Kopf der Seite hinzufügen:

Code kopieren Der Code lautet wie folgt:

Tatsächlich funktioniert dieser Code nicht, da er ein Problem nicht berücksichtigt, nämlich den Rand des Browsers. Wenn wir die OffsetHeight der Seite erhalten, ist der Rand des Browsers 2 Pixel groß, also ist clientHeight immer Unter keinen Umständen kleiner als offsetHeight, was es auch dann wahr macht, wenn keine Bildlaufleiste vorhanden ist. Daher müssen wir diesen Fehler korrigieren. Der Code sollte wie folgt geändert werden: 4 Pixel von offsetHeight subtrahieren, das heißt:

Code kopieren Der Code lautet wie folgt:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight- 4){
//Zugehörige Skripte ausführen.
}

Außerdem müssen wir hier verstehen, dass der obige Code dazu dient, die horizontale Bildlaufleiste zu beurteilen. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

if (document.documentElement.clientWidth < document.documentElement.offsetWidth- 4){
//Zugehörige Skripte ausführen.
}

Um festzustellen, ob die Bildlaufleiste an den unteren Rand der Seite gezogen wurde, können Sie den folgenden Code verwenden

Code kopieren Der Code lautet wie folgt:

window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop document.body.scrollTop)-document.documentElement.clientHeight;
} sonst {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//etwas tun
}
}

Beispiel 2

Habe es online gefunden. Es ist ziemlich browserkompatibel. Das Merkwürdige ist, dass ich in der Dokumentation keine relevanten Informationen finden konnte. Posten Sie den Code.

Code kopieren Der Code lautet wie folgt:

/********************
* Ermitteln Sie die Höhe der Fenster-Bildlaufleiste
******************/
Funktion getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    sonst wenn(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}

/********************
* Ermitteln Sie die Höhe des sichtbaren Bereichs des Fensters
*******************/
Funktion getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     }
    sonst
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    return clientHeight;
}
/********************
* Ermitteln Sie die tatsächliche Höhe des Dokumentinhalts
*******************/
Funktion getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  Funktionstest(){
 if (getScrollTop() getClientHeight()==getScrollHeight()){
  alarm("到达底部");
 }else{
  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.