Maison > interface Web > js tutoriel > js opération barre de défilement événement exemple_javascript compétences

js opération barre de défilement événement exemple_javascript compétences

WBOY
Libérer: 2016-05-16 16:17:03
original
1091 Les gens l'ont consulté

L'exemple de cet article décrit comment gérer les événements de la barre de défilement dans js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Je me suis toujours demandé comment surveiller les événements de la barre de défilement, et aujourd'hui je l'ai enfin compris.

Le code ci-dessous sert à surveiller la barre de défilement tant qu'elle bouge, et le code ci-dessous renvoie le div supérieur à afficher et à masquer

window.onscroll = function () { 
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t > 0) { 
    $(".cbbfixed").css("bottom", "10px"); 
  } else { 
    $(".cbbfixed").css("bottom", "-85px"); 
  } 
}
Copier après la connexion

Remarque :

t : La distance entre la barre de défilement et l'extrémité supérieure

t>0, c'est-à-dire qu'une fois que la barre de défilement défile, l'instruction if() est exécutée immédiatement. Le code dans else() est que lorsque la barre de défilement atteint le haut, revenez au div supérieur pour masquer <🎜. >

Opération de clic sur le bouton Retour en haut :


$("#cgotop").click(function(){ 
  $('body,html').animate({ scrollTop: 0 }, 100); 
  return false; 
});
Copier après la connexion

Supplément :

1. Surveiller l'événement de la barre de défilement d'un certain élément


$(selector).scroll(function(){.......});
Copier après la connexion

2. Obtenez la distance de défilement de la barre de défilement

$(selector).scrollTop();
$(selector).scrollLefft();
Copier après la connexion
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal