In diesem Artikel wird die Methode von JS beschrieben, um festzustellen, ob die Bildlaufleiste den unteren oder oberen Teil der Seite erreicht hat. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Wir sehen oft viele Websites, die zum Top -Effekt zurückkehren, ist, dass sie, wenn wir die Balken in die angegebene Position scrollen, nach oben zurückkehrt, andernfalls wird sie automatisch versteckt. Lassen Sie mich die Prinzipien und Methoden zur Implementierung dieses Effekts vorstellen.
Wenn der sichtbare Bereich kleiner als die tatsächliche Höhe der Seite ist, wird festgestellt, dass eine Bildlaufleiste erscheint, dh:
Die Codekopie lautet wie folgt: if (document.documentElement.clientHeight <document.documentElement.offseteight) scroll = true;
Um das Dokument zu verwenden.DocumentElement, müssen Sie am Kopf der Seite eine Erklärung hinzufügen:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Tatsächlich funktioniert dieser Code nicht, da er kein Problem in Betracht gezogen hat, dh die Browsergrenze. Wenn wir die Offseteight -Höhe der Seite erhalten, enthält sie den Browser -Grenze. Der Browsergrenze beträgt 2 Pixel, sodass ClientHeight in jedem Fall immer kleiner als Offseteight ist, was es auch ohne Scroll -Balken wahr macht. Daher müssen wir diesen Fehler korrigieren. Der Code sollte so geändert werden und 4 Pixel in Offseteight subtrahieren, dh:
Kopieren Sie den Code-Code wie folgt: if (document.documentElement.clientHeight <document.documentElement.offseteight-4) {
// Verwandte Skripte ausführen.
}
Außerdem müssen wir hier herausfinden, dass der obige Code die horizontale Bildlaufleiste beurteilt. Wir müssen im Allgemeinen die vertikale Schriftrolle beurteilen, der Code lautet wie folgt:
Kopieren Sie den Code wie folgt: if (document.documentElement.clientwidth <document.documentElement.offsetwidth-4) {
// Verwandte Skripte ausführen.
}
Um festzustellen, ob die Bildlaufleiste am Ende der Seite gezogen wurde, können Sie den folgenden Code verwenden
Kopieren Sie den Code 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;
} anders {
marginbot = document.body.scrollHeight document.body.scrolltop- document.body.clientHeight;
}
if (marginbot <= 0) {
// etwas mach
}
}
Beispiel 2
Auf der Suche nach es online. Sehr Browser kompatibel. Seltsamerweise fand ich keine relevanten Informationen im Dokument. Veröffentlichen Sie den Code.
Kopieren Sie den Code wie folgenden
* Nehmen Sie die Fenster -Scroll -Stange -Höhe
**********************//
Funktion GetCrolltop ()
{
var scrolltop = 0;
if (document.documentElement && document.documentElement.scrolltop)
{
scrolltop = document.documentElement.scrolltop;
}
sonst wenn (document.body)
{
scrolltop = document.body.scrolltop;
}
Return Scrolltop;
}
/*****************************
* Nehmen Sie die Höhe des visuellen Bereichs des Fensters
*************************/
Funktion 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;
}
anders
{
var clientHeight = (document.body.clientHeight> document.documentElement.clientHeight)? document.body.clientHeight: document.documentElement.clientHeight;
}
ClientHeight zurückgeben;
}
/*****************************
* Nehmen Sie die tatsächliche Höhe des Dokumentinhalts
*************************/
Funktion GetCrollHeight ()
{
return math.max (document.body.scrollHeight, document.documentElement.scrollHeight);
}
Funktionstest () {
if (getCrolltop ()+getClientHeight () == GetCrollHeight ()) {
wachsam ("Erreichen Sie den Boden");
}anders{
alarm ("nicht den Boden erreicht");
}
}
Wieder auffüllen:
DTD hat erklärt:
Dh
document.documentElement.scrollHeight alle Inhaltshöhe des Browsers, document.body.ScrollHeight alle Inhaltshöhe des Browsers
document.documentElement.scrolltop Die Browser -Scrolls -Teilhöhe, document.body.scrolltop ist immer 0
document.documentElement.clientHeight Die sichtbare Teilhöhe des Browsers, Dokument
Ff
document.documentElement.scrollHeight alle Inhaltshöhe des Browsers, document.body.ScrollHeight alle Inhaltshöhe des Browsers
document.documentElement.scrolltop Die Browser -Scrolls -Teilhöhe, document.body.scrolltop ist immer 0
document.documentElement.clientHeight Die sichtbare Teilhöhe des Browsers, Dokument
Chrom
document.documentElement.scrollHeight alle Inhaltshöhe des Browsers, document.body.ScrollHeight alle Inhaltshöhe des Browsers
document.documentElement.scrolltop ist immer 0, document.body.Scrolltop Browser Scrolling -Teilhöhe
document.documentElement.clientHeight Die sichtbare Teilhöhe des Browsers, Dokument
DTD nicht deklariert:
Dh
document.documentElement.CrollHeight die Höhe des sichtbaren Teils des Browsers, Dokument.body.ScrollHeight die Höhe aller Inhalte des Browsers
document.documentElement.scrolltop ist immer 0, document.body.Scrolltop Browser Scrolling -Teilhöhe
document.documentElement.clientHeight ist immer 0, document.body.clientHeight Die sichtbare Teilhöhe des Browsers
Ff
document.documentElement.CrollHeight die Höhe des sichtbaren Teils des Browsers, Dokument.body.ScrollHeight die Höhe aller Inhalte des Browsers
document.documentElement.scrolltop ist immer 0, document.body.Scrolltop Browser Scrolling -Teilhöhe
document.documentElement.clientHeight Die Höhe des gesamten Inhalts des Browsers, Dokument.body.ClientHeight Die Höhe des sichtbaren Teils des Browsers
Chrom
document.documentElement.CrollHeight die Höhe des sichtbaren Teils des Browsers, Dokument.body.ScrollHeight die Höhe aller Inhalte des Browsers
document.documentElement.scrolltop ist immer 0, document.body.Scrolltop Browser Scrolling -Teilhöhe
document.documentElement.clientHeight Die Höhe des gesamten Inhalts des Browsers, Dokument.body.ClientHeight Die Höhe des sichtbaren Teils des Browsers
Die Höhe des gesamten Inhalts des Browsers ist die Höhe des gesamten Browser -Frameworks, einschließlich der Summe der Höhe des Scroll -Stange -Roll -Teils + des visuellen Teils + des versteckten Teils unten
Die Höhe des Browser -Scrolls -Teils besteht aus der des Bildlaufleistens rollt Teil der Höhe, um die Höhe der Oberseite des gesamten Objekts zu sehen.
Nach dem Verständnis der oben genannten Parameter können wir einen Scrolling -Effekt erstellen, der mit IE, FF und Chrombrowsern kompatibel ist.
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.