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-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-07-19 16:06:16

original

1050 Les gens l'ont consulté

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;

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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