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

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"); 
  } 
}

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

Supplément :

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

$(selector).scroll(function(){.......});

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

$(selector).scrollTop();
$(selector).scrollLefft();

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.