jQuery vérifie si div fait défiler pour se terminer

Cet extrait de code jQuery concis est utilisé pour détecter si l'utilisateur défile vers le bas de l'élément DIV et déclenche un événement. Ceci a besoin de savoir si l'utilisateur défile vers le bas (débordement: défilement), par exemple, pour vérifier si l'utilisateur a lu les termes et conditions dans le formulaire d'enregistrement.

$(document).ready(function(){
    $('div').bind('scroll', chk_scroll);
});

function chk_scroll(e){
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){
        console.log("已滚动到底部");
    }
}

Autres méthodes:

// scrollTop 指的是滚动条的顶部位置，等于 scrollHeight - offsetHeight
if (obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { }

FAQ lié au défilement jQuery (FAQ)

Comment utiliser jQuery pour détecter si l'utilisateur défile au bas de l'élément div?

Utilisez jQuery pour détecter si l'utilisateur défile au bas de l'élément DIV, vous pouvez utiliser l'événement scroll avec les attributs scrollTop, scrollHeight. scroll L'événement se déclenche lorsque l'utilisateur fait défiler l'élément DIV. L'attribut scrollTop renvoie le nombre de pixels dans lesquels le contenu d'élément défile vers le haut. scrollHeight L'attribut renvoie la hauteur totale de l'élément dans les pixels, y compris les marges intérieures, mais pas les bordures, les barres de défilement ou les marges. En comparant ces deux propriétés, vous pouvez déterminer si l'utilisateur a fait défiler au bas de l'élément div.

Quelle est la différence entre

et scrollTop dans scrollHeight?

dans jQuery, scrollTop et scrollHeight sont deux propriétés qui fournissent des informations sur la position et la hauteur de défilement de l'élément. scrollTop Renvoie le nombre de pixels dans lesquels le contenu d'élément défile vers le haut. Renvoie 0 si l'élément ne fait pas défiler. scrollHeight Renvoie la hauteur totale de l'élément dans les pixels, y compris les marges intérieures, mais pas les frontières, les barres de défilement ou les marges. Il comprend la hauteur du contenu qui n'est pas visible à l'écran en raison du débordement.

Comment utiliser jQuery pour vérifier si l'utilisateur défile vers le bas de la page?

Pour utiliser jQuery pour vérifier si l'utilisateur défile en bas de la page, vous pouvez utiliser l'événement scroll avec les propriétés scrollTop, scrollHeight, height en combinaison. L'événement scroll est licencié lorsque l'utilisateur fait défiler la page. L'attribut scrollTop renvoie le nombre de pixels que le contenu de la page défile vers le haut. L'attribut scrollHeight renvoie la hauteur totale de la page en pixels. La propriété height renvoie la hauteur de la fenêtre. En comparant ces propriétés, vous pouvez déterminer si l'utilisateur a fait défiler au bas de la page.

Puis-je utiliser jQuery pour détecter quand l'utilisateur commence à faire défiler?

Oui, vous pouvez utiliser jQuery pour détecter lorsque l'utilisateur commence à faire défiler. Vous pouvez utiliser l'événement scroll pour y parvenir. scroll L'événement se déclenche lorsque l'utilisateur défile l'élément spécifié. En utilisant cet événement, vous pouvez exécuter des fonctions ou exécuter un certain code lorsque l'utilisateur commence à faire défiler.

Comment utiliser jQuery pour détecter la direction de défilement?

Pour utiliser jQuery pour détecter la direction de défilement, vous pouvez comparer la position de défilement actuelle avec la position de défilement précédente. Si la position de défilement actuelle est supérieure à la position de défilement précédente, l'utilisateur fait défiler vers le bas. Si la position de défilement actuelle est plus petite que la position de défilement précédente, l'utilisateur fait défiler vers le haut. Vous pouvez stocker la position de défilement actuelle dans une variable et la mettre à jour chaque fois que l'événement scroll est licencié.

Puis-je utiliser jQuery pour empêcher le défilement?

Oui, vous pouvez utiliser jQuery pour éviter le défilement. Vous pouvez utiliser la méthode scroll dans l'événement event.preventDefault() pour y parvenir. Cette méthode annule l'événement si l'événement est annulé, ce qui signifie que l'action par défaut appartenant à l'événement ne se produira pas. Pour les événements scroll, l'action par défaut est le défilement, donc l'utilisation de cette méthode empêchera le défilement.

Comment utiliser JQuery Animation pour faire défiler?

Vous pouvez utiliser l'attribut de méthode animate et scrollTop pour animer le défilement. La méthode animate exécute une animation personnalisée d'un ensemble de propriétés CSS. scrollTop Propriétés Définissez ou renvoyez le nombre de pixels auxquels le contenu de l'élément est défilé verticalement. En les utilisant en combinaison, vous pouvez animer le défilement des éléments.

Puis-je utiliser jQuery pour faire défiler vers un élément spécifique?

Oui, vous pouvez utiliser jQuery pour faire défiler sur des éléments spécifiques. Vous pouvez utiliser la méthode animate et la méthode offset pour y parvenir. La méthode animate exécute une animation personnalisée d'un ensemble de propriétés CSS. La méthode offset renvoie les coordonnées de l'élément par rapport au coin supérieur gauche du document. En les utilisant en combinaison, vous pouvez animer le défilement de la page sur des éléments spécifiques.

Comment utiliser jQuery pour faire défiler en haut de la page?

Vous pouvez utiliser la combinaison jQuery avec la méthode animate et la propriété scrollTop pour faire défiler en haut de la page. La méthode animate exécute une animation personnalisée d'un ensemble de propriétés CSS. scrollTop Propriétés Définissez ou renvoyez le nombre de pixels auxquels le contenu de l'élément est défilé verticalement. Vous pouvez animer le défilement de la page en haut en définissant la propriété animate sur 0 dans la méthode scrollTop.

Puis-je utiliser jQuery pour détecter quand un utilisateur cesse de faire défiler?

Oui, vous pouvez utiliser jQuery pour détecter lorsque l'utilisateur cesse de faire défiler. Vous pouvez utiliser l'événement scroll et la fonction setTimeout pour l'implémenter. scroll L'événement se déclenche lorsque l'utilisateur défile l'élément spécifié. setTimeout La fonction appelle une fonction ou calcule une expression après le nombre spécifié de millisecondes. En les utilisant en combinaison, vous pouvez exécuter des fonctions ou exécuter certains code lorsque l'utilisateur cesse de faire défiler.

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!