Maison > Article > interface Web > Comment déterminer la direction de l'événement de défilement dans jquery

Comment déterminer la direction de l'événement de défilement dans jquery

coldplay.xixioriginal: 2020-11-23 10:06:041967parcourir

Comment jquery détermine la direction d'un événement de défilement : utilisez la méthode [scrollTop()] pour définir ou renvoyer la position de la barre de défilement verticale de l'élément sélectionné, et la syntaxe est [$(selector).scrollTop( position)].

L'environnement d'exploitation de ce tutoriel : Système Windows 7, jquery version 3.2.1 Cette méthode convient à toutes les marques d'ordinateurs.

Comment jquery détermine la direction d'un événement de défilement :

Dans jQuery, vous pouvez utiliser la méthode scrollTop() pour déterminer la direction d'un événement de défilement. () est utilisée pour définir ou renvoie la position de la barre de défilement verticale de l'élément sélectionné. En utilisant cette méthode, nous pouvons déterminer la direction de défilement.

<code><strong>jQuery scrollTop()</strong>jQuery scrollTop()

Méthode

la méthode scrollTop() définit ou renvoie la position de la barre de défilement verticale de l'élément sélectionné.

Astuce : Lorsque la barre de défilement est en haut, la position est 0.

Syntaxe :

$(selector).scrollTop(position)

Paramètres : Cette méthode accepte une seule position de paramètre, qui est facultative. Il est utilisé pour spécifier la position de la barre de défilement verticale en pixels.

Valeur de retour : Renvoie la position verticale de la barre de défilement de l'élément sélectionné.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body {
height: 300%
}
div {
position: fixed;
padding-left: 10px;
padding-top: 30px;
height: 10%;
width: 35%;
font-weight: bold;
border: 2px solid red;
}
</style>
</head>
<body>
<div></div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
console.log(&#39;scrollDown&#39;);
$(&#39;div&#39;).text(&#39;向下滚动&#39;);
} else {
console.log(&#39;scrollUp&#39;);
$(&#39;div&#39;).text(&#39;向上滚动&#39;);
}
position = scroll;
});
</script>
</body>
</html>

Recommandations d'apprentissage gratuites associées : JavaScript

(vidéo)

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：Comment déterminer si un objet est un objet jqueryArticle suivant：Comment déterminer si un objet est un objet jquery

Articles Liés

Voir plus