JQUERY DETECT% SCROLLED SUR LA PAGE

Utilisez jQuery pour détecter le pourcentage de défilement Web

L'intégralité de l'extrait de code jQuery suivant montre comment déclencher une action d'événement lorsqu'un utilisateur défile vers un pourcentage spécifique de la page Web. Les tests montrent que lors de la capture d'événements de défilement de souris, il est préférable d'utiliser des valeurs entre 55% et 100%.

$(document).ready(function(){

// 例子：滚动到网页75%时显示一个div
var webpage = $("body");
var webpage_height = webpage.height();
var trigger_height = webpage_height * 0.75;


if ($(window).scrollTop() > (webpage_height-trigger_height)) {
    $("#divtoshow").show();
}

});

jQuery Scroll Event FAQs (FAQs)

Comment détecter les événements de défilement dans jQuery?

détecter les événements de défilement dans jQuery est très simple. La méthode intégrée .scroll() peut être utilisée. Cette méthode déclenche un événement de défilement ou attache une fonction qui s'exécute lorsque l'événement de défilement se produit. Voici un exemple simple:

$(window).scroll(function(){
  console.log("检测到滚动事件！");
});

Dans ce code, chaque fois qu'un événement de défilement se produit dans la fenêtre, le message "Événement de défilement détecté!"

Comment déterminer la direction de l'événement de défilement jQuery?

Déterminer la direction de l'événement JQuery Scroll nécessite plus d'opérations. La position de défilement actuelle doit être comparée à la position de défilement précédente. Voici un exemple de base:

var lastScrollTop = 0;
$(window).scroll(function(){
  var currentScrollTop = $(this).scrollTop();
  if (currentScrollTop > lastScrollTop){
    console.log("向下滚动");
  } else if (currentScrollTop < lastScrollTop) {
    console.log("向上滚动");
  }
  lastScrollTop = currentScrollTop;
});

Dans ce code, nous stockons la dernière position de défilement dans une variable. Ensuite, dans chaque événement de défilement, nous comparons la position de défilement actuelle avec la dernière position de défilement pour déterminer la direction du parchemin.

Quelle est la fonction de la méthode

dans jQuery? .scrollTop()

La méthode

de jQuery obtient ou définit la position verticale actuelle de la barre de défilement qui correspond au premier élément de l'ensemble d'éléments. Lorsqu'il est appelé sans paramètres, il revient à la position de défilement; lorsqu'il est appelé avec des paramètres, il définit la position de défilement. .scrollTop()

Comment déclencher une fonction lorsque la page défile vers une position spécifique?

Oui, vous pouvez déclencher la fonction lorsque la page défile vers une position spécifique. Vous pouvez le faire en vérifiant la position de défilement actuelle dans le gestionnaire d'événements de défilement. Voici un exemple:

$(window).scroll(function(){
  if ($(this).scrollTop() > 200){
    console.log("滚动超过200像素");
  }
});

Dans ce code, chaque fois que la position de défilement dépasse 200 pixels, le message "Scroll dépasse 200 pixels" sera enregistré sur la console.

Comment animer les événements de défilement dans jQuery?

Vous pouvez utiliser la méthode

pour animation des événements de défilement dans jQuery. Cette méthode vous permet de créer des effets d'animation personnalisés sur les numéros. Voici un exemple: .animate()

$('html, body').animate({
  scrollTop: $("#myDiv").offset().top
}, 2000);

Dans ce code, la page fera défiler en douceur à la position supérieure de l'élément avec ID "MyDiv" en 2 secondes.

Puis-je arrêter ou bloquer les événements de défilement à jQuery?

Non, vous ne pouvez pas arrêter ou bloquer les événements de défilement dans jQuery. L'événement de défilement est un événement de navigateur natif et ne peut pas être annulé. Cependant, vous pouvez bloquer les actions par défaut pour certains événements qui peuvent provoquer le défilement, tels que les événements de roue de souris.

Comment détecter les événements de défilement sur des éléments spécifiques de JQuery?

Les événements de défilement sur des éléments spécifiques de jQuery peuvent être détectés en attachant la méthode

à cet élément. Voici un exemple: .scroll()

$("#myDiv").scroll(function(){
  console.log("在#myDiv上检测到滚动事件！");
});

Dans ce code, l'événement de défilement sur l'ID d'élément "MyDiv" enregistre l'événement du message "Scroll a été détecté sur #MyDiv!"

Puis-je détecter les événements de défilement horizontal dans jQuery?

Oui, vous pouvez utiliser la méthode .scrollLeft() pour détecter les événements de défilement horizontal dans jQuery. Cette méthode est similaire à la méthode .scrollTop(), mais est utilisée pour le défilement horizontal.

Comment détecter la fin d'un événement de défilement à jQuery?

La fin d'un événement de défilement dans jQuery peut être détectée en comparant la position de défilement actuelle avec la hauteur de défilement totale. Voici un exemple:

$(document).ready(function(){

// 例子：滚动到网页75%时显示一个div
var webpage = $("body");
var webpage_height = webpage.height();
var trigger_height = webpage_height * 0.75;


if ($(window).scrollTop() > (webpage_height-trigger_height)) {
    $("#divtoshow").show();
}

});

Dans ce code, lorsque l'extrémité de défilement est atteinte, le message "Scroll End détecté!"

Puis-je détecter des événements de défilement sur les appareils mobiles à jQuery?

Oui, vous pouvez détecter des événements de défilement sur les appareils mobiles dans jQuery. La méthode .scroll() fonctionne de la même manière sur les appareils mobiles car il fonctionne sur les navigateurs de bureau. Cependant, n'oubliez pas que les navigateurs mobiles peuvent gérer les événements de défilement différemment des navigateurs de bureau, il est donc toujours recommandé de tester votre code sur plusieurs appareils.

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!