Ausführliche Erläuterung des Beispielcodes für Javascript zur Bestimmung der Scrollposition der Bildlaufleiste-js-Tutorial-php.cn

Ausführliche Erläuterung des Beispielcodes für Javascript zur Bestimmung der Scrollposition der Bildlaufleiste

伊谢尔伦

Freigeben： 2017-07-19 16:06:16

Original

1051 Leute haben es durchsucht

Auf vielen Websites sehen wir häufig einen Rückkehr-nach-oben-Effekt. Wenn unsere Bildlaufleiste die angegebene Position erreicht, wird sie automatisch ausgeblendet Prinzip und Umsetzung dieser Methode.

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

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

Nach dem Login kopieren

Zur Verwendung von document.documentElement , muss am Kopf der Seite eine Anweisung hinzugefügt werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nach dem Login kopieren

Eigentlich funktioniert dieser Code nicht, weil er ein Problem nicht berücksichtigt, nämlich das Wenn wir die OffsetHeight der Seite erhalten, enthält sie den Rand des Browsers, der 2 Pixel beträgt, sodass clientHeight unter allen Umständen immer kleiner als OffsetHeight ist, was bedeutet, dass es wahr ist, auch wenn keine Bildlaufleiste vorhanden ist, also müssen wir es tun Korrigieren Sie das. Falsch, der Code sollte wie folgt geändert werden: Subtrahieren Sie 4 Pixel von offsetHeight, das heißt:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//执行相关脚本。
}

Nach dem Login kopieren

Außerdem müssen wir hier verstehen, dass der obige Code dazu dient, die horizontale Bildlaufleiste zu beurteilen Im Allgemeinen muss es beurteilt werden Es handelt sich um vertikales Scrollen. Der Code lautet wie folgt:

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//执行相关脚本。
}

Nach dem Login kopieren

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

window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}

Nach dem Login kopieren

Beispiel 2

Im Internet gesucht. Es ist ziemlich browserkompatibel. Das Merkwürdige ist, dass ich in der Dokumentation keine relevanten Informationen finden konnte. Posten Sie den Code.

/********************
* 取窗口滚动条高度 
******************/
function getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}
/********************
* 取窗口可视范围的高度 
*******************/
function 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;        
    }
    else
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;    
    }
    return clientHeight;
}
/********************
* 取文档内容实际高度 
*******************/
function getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  function test(){
 if (getScrollTop()+getClientHeight()==getScrollHeight()){
  alert("到达底部");
 }else{
  alert("没有到达底部");
 }
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispielcodes für Javascript zur Bestimmung der Scrollposition der Bildlaufleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!