Cet article décrit la méthode de JS pour déterminer si la barre de défilement a atteint le bas ou le haut de la page. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Nous voyons souvent de nombreux sites Web revenir à l'effet supérieur est que lorsque nous faisons défiler la barre à la position spécifiée, il reviendra au sommet, sinon il sera automatiquement caché. Permettez-moi d'introduire les principes et les méthodes de mise en œuvre de cet effet.
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 apparaît, c'est-à-dire:
La copie de code est la suivante: if (document.DocumentElement.ClientHeight <document.DocumentElement.offSetheight) Scroll = true;
Pour utiliser Document.DocumentElement, vous devez ajouter une déclaration en tête de la page:
Copiez le code comme suit: <! 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 n'a pas pris en compte un problème, c'est-à-dire la bordure du navigateur. Lorsque nous obtenons la hauteur de la page de la page, elle comprend la bordure du navigateur. La bordure du navigateur est de 2 pixels, donc dans tous les cas, le client est toujours plus petit que hors de la hauteur, ce qui le rend vrai même sans barre de défilement. Par conséquent, nous devons corriger cette erreur. Le code doit être modifié comme ceci et soustrayer 4 pixels sur Offsetheight, c'est-à-dire:
Copiez le code de code comme suit: if (document.documentElement.clientHeight <document.documentElement.offsetheight-4) {
// Exécuter des scripts associés.
}
De plus, nous devons comprendre ici que le code ci-dessus juge la barre de défilement horizontale. Nous devons généralement juger le parchemin vertical, le code est le suivant:
Copiez le code comme suit: if (document.DocumentElement.ClientWidth <document.DocumentElement.OffSetWidth-4) {
// Exécuter des scripts associés.
}
Pour déterminer si la barre de défilement a été tirée au bas de la page, vous pouvez utiliser le code suivant
Copiez le code comme suit: window.onscroll = function () {
var marginbot = 0;
if (document.DocumentElement.ScrollTop) {
marginbot = document.DocumentElement.ScrollHeight (document.DocumentElement.ScrollTop + document.body.scrolltop) -Document.DocumentElement.ClientHeight;
} autre {
marginbot = document.body.scrollheight document.body.scrolltop- document.body.clientHeight;
}
if (marginbot <= 0) {
// faire quelque chose
}
}
Exemple 2
À la recherche en ligne. Très compatible par le navigateur. Étrangement, je n'ai trouvé aucune information pertinente dans le document. Publier le code.
Copiez le code comme suit: / ************************
* Prenez la hauteur de la barre de défilement de la fenêtre
************************ /
fonction getcrolltop ()
{
var scrolltop = 0;
if (document.DocumentElement && document.DocumentElement.ScrollTop)
{
ScrollTop = document.DocumentElement.ScrollTop;
}
else if (document.body)
{
scrollTop = document.body.scrolltop;
}
return ScrollTop;
}
/ *************************
* Prenez la hauteur de la plage visuelle de la fenêtre
*************************** /
fonction 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;
}
autre
{
var clientHeight = (document.body.clientheight> document.documentElement.clientHeight)? document.body.clientHeight: document.documentElement.clientHeight;
}
return ClientHeight;
}
/ *************************
* Prenez la hauteur réelle du contenu du document
*************************** /
fonction getCrollHeight ()
{
return math.max (document.body.scrollHeight, document.documentElement.scrollHeight);
}
fonction test () {
if (getcrolltop () + getClientHeight () == getCrollHeight ()) {
alerte ("atteindre le fond");
}autre{
alerte ("non atteint le fond");
}
}
Remplir:
DTD a déclaré:
C'est-à-dire
document.DocumentElement.ScrollHeight All Content Height of the Browser, document.body.scrollHeight Toute la hauteur du contenu du navigateur
document.DocumentElement.ScrollTop La hauteur de la pièce de défilement du navigateur, document.body.scrolltop est toujours 0
document.DocumentElement.ClientHeight La hauteur de partie visible du navigateur, document.body.clientheight La hauteur du contenu du navigateur
Ff
document.DocumentElement.ScrollHeight All Content Height of the Browser, document.body.scrollHeight Toute la hauteur du contenu du navigateur
document.DocumentElement.ScrollTop La hauteur de la pièce de défilement du navigateur, document.body.scrolltop est toujours 0
document.DocumentElement.ClientHeight La hauteur de partie visible du navigateur, document.body.clientheight La hauteur du contenu du navigateur
Chrome
document.DocumentElement.ScrollHeight All Content Height of the Browser, document.body.scrollHeight Toute la hauteur du contenu du navigateur
document.DocumentElement.ScrollTop est toujours 0, document.body.scrolltop Browser défile de la partie
document.DocumentElement.ClientHeight La hauteur de partie visible du navigateur, document.body.clientheight La hauteur du contenu du navigateur
DTD non déclaré:
C'est-à-dire
document.DocumentElement.ScrollHeight La hauteur de la partie visible du navigateur, document.body.scrollHeight La hauteur de tous les contenus du navigateur
document.DocumentElement.ScrollTop est toujours 0, document.body.scrolltop Browser défile de la partie
document.DocumentElement.ClientHeight est toujours 0, document.body.clientheight La hauteur de partie visible du navigateur
Ff
document.DocumentElement.ScrollHeight La hauteur de la partie visible du navigateur, document.body.scrollHeight La hauteur de tous les contenus du navigateur
document.DocumentElement.ScrollTop est toujours 0, document.body.scrolltop Browser défile de la partie
document.DocumentElement.ClientHeight La hauteur de tout le contenu du navigateur, document.body.clientheight La hauteur de la partie visible du navigateur
Chrome
document.DocumentElement.ScrollHeight La hauteur de la partie visible du navigateur, document.body.scrollHeight La hauteur de tous les contenus du navigateur
document.DocumentElement.ScrollTop est toujours 0, document.body.scrolltop Browser défile de la partie
document.DocumentElement.ClientHeight La hauteur de tout le contenu du navigateur, document.body.clientheight La hauteur de la partie visible du navigateur
La hauteur de tous les contenus du navigateur est la hauteur de l'ensemble du cadre du navigateur, y compris la somme de la hauteur de la partie roulante de la barre de défilement + la partie visuelle + la partie cachée en bas
La hauteur de la partie de défilement du navigateur est celle de la barre de défilement déroule une partie de la hauteur pour voir la hauteur du haut de l'objet entier.
Après avoir compris les paramètres ci-dessus, nous pouvons créer un effet de défilement compatible avec les navigateurs IE, FF et Chrome.
J'espère que cet article sera utile à la programmation JavaScript de tous.