recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'exemple de code pour javascript pour déterminer la position de défilement de la barre de défilement

Explication détaillée de l'exemple de code pour javascript pour déterminer la position de défilement de la barre de défilement

伊谢尔伦
伊谢尔伦original
2017-07-19 16:06:161125parcourir

Nous constatons souvent un effet de retour en haut sur de nombreux sites Web. Lorsque notre barre de défilement atteint la position spécifiée, elle reviendra en haut. Sinon, elle sera automatiquement masquée. principe et mise en œuvre de cette méthode.

Lorsque la zone visible est plus petite que la hauteur réelle de la page, il est déterminé qu'une barre de défilement est apparue, c'est-à-dire : 

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

Pour utiliser document.documentElement , il faut ajouter une mention en tête de page :

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


En fait, ce code ne fonctionne pas car il ne prend pas en compte un problème, qui est la bordure du navigateur Lorsque nous obtenons le offsetHeight de la page, il inclut la bordure du navigateur, qui est de 2 pixels, donc clientHeight est toujours inférieur à offsetHeight en toutes circonstances, ce qui le rend vrai même s'il n'y a pas de barre de défilement, nous devons donc corriger cela. , le code doit être modifié comme ceci, soustrayez 4 pixels de offsetHeight, soit : 

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

De plus, nous devons comprendre ici, le code ci-dessus sert à juger la barre de défilement horizontale, nous devons généralement juge Il s'agit d'un défilement vertical. Le code est le suivant : 

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

Pour déterminer si la barre de défilement a été tirée vers le bas de la page, vous pouvez utiliser le code suivant 

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

Exemple 2

Sur Internet Je le recherche. C'est tout à fait compatible avec les navigateurs. Ce qui est étrange, c'est que je n'ai trouvé aucune information pertinente dans la documentation. Postez le 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("没有到达底部");
 }
}


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code détaillé montrant comment utiliser javascript pour déterminer si la barre de défilement atteint le basArticle suivant：Exemple de code détaillé montrant comment utiliser javascript pour déterminer si la barre de défilement atteint le bas

Articles Liés

Voir plus