suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung des Beispielcodes für Javascript zur Bestimmung der Scrollposition der Bildlaufleiste

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

伊谢尔伦
伊谢尔伦Original
2017-07-19 16:06:161086Durchsuche

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;

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">


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){
//执行相关脚本。
}

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){
//执行相关脚本。
}

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
}
}

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("没有到达底部");
 }
}


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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detailliertes Codebeispiel für die Verwendung von Javascript, um festzustellen, ob die Bildlaufleiste den unteren Rand erreichtNächster Artikel：Detailliertes Codebeispiel für die Verwendung von Javascript, um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht

In Verbindung stehende Artikel

Mehr sehen