Comment déterminer la direction de l'événement de défilement dans jquery-js tutoriel-php.cn

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

coldplay.xixi

Libérer： 2020-11-30 10:57:40

original

2058 Les gens l'ont consulté

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)].

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

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)

Copier après la connexion

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>

Copier après la connexion

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!