JQUERY détecter le défilement vers le bas - lire T&C

Utilisez la détection JQuery pour faire défiler vers le bas et activez la case à cocher Termes et Conditions après que l'utilisateur défile vers le bas de la page (ou DIV avec défilement).

l'extrait de code jQuery suivant peut détecter si l'utilisateur s'est fait défiler au bas de la page:

jQuery(document).ready(function() {
    jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);

    var $box = $("#scrollPane"),
        $inner = $("> .inner", $box),
        innerOuterHeight = $inner.outerHeight();
    boxHeight = $box.height();
    boxOffsetTop = $box.offset().top;

    jQuery("#scrollPane").scroll(function() {
        if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight) {
            jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
        }
    });
});

Les contenus de service sont ici

J'accepte les termes ci-dessus.

FAQ sur JQuery fait défiler vers le bas (FAQ)

Comment utiliser jQuery pour détecter quand un utilisateur défile au bas de la page?

Utilisez jQuery pour détecter quand un utilisateur défile au bas de la page, vous pouvez utiliser l'événement scroll et scrollTop et les attributs scrollHeight en combinaison. L'événement scroll est tiré chaque fois que le parchemin se produit, et l'attribut scrollTop renvoie le nombre de pixels dans lesquels le contenu de l'élément est défilé verticalement. L'attribut scrollHeight renvoie la hauteur totale de l'élément dans les pixels, y compris le rembourrage, mais pas les bordures, les barres de défilement ou les marges. Voici un exemple simple:

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        alert("bottom!");
    }
});

Dans ce code, $(window).scrollTop() renvoie le nombre de pixels que l'utilisateur défile du haut, $(window).height() renvoie la hauteur de la fenêtre et $(document).height() renvoie la hauteur du document. Lorsque la somme du nombre de pixels et de hauteur de la fenêtre défilés est égal à la hauteur du document, cela signifie que l'utilisateur a fait défiler vers le bas.

Comment utiliser jQuery pour faire défiler automatiquement vers le bas de la page?

Pour utiliser jQuery pour faire défiler automatiquement vers le bas de la page, vous pouvez utiliser la méthode animate et les attributs de la méthode et scrollTop en combinaison. La méthode height effectue une animation personnalisée d'un ensemble d'attributs CSS. Voici un exemple simple: animate scrollTop height Dans ce code,

défile le document en bas à une vitesse d'animation lente. La propriété

$("html, body").animate({scrollTop: $(document).height()}, "slow");

est définie sur la hauteur du document, ce qui signifie que la page fait défiler vers le bas.

$("html, body").animate({scrollTop: $(document).height()}, "slow"); Comment utiliser jQuery pour détecter lorsqu'un utilisateur défile au bas d'un élément spécifique? scrollTop

Pour utiliser jQuery pour détecter quand un utilisateur défile au bas d'un élément spécifique, vous pouvez utiliser l'événement

avec les attributs

,

et scroll en combinaison. L'événement scrollTop est tiré chaque fois que le rouleau se produit. Voici un exemple simple: scrollHeight

jQuery(document).ready(function() {
    jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);

    var $box = $("#scrollPane"),
        $inner = $("> .inner", $box),
        innerOuterHeight = $inner.outerHeight();
    boxHeight = $box.height();
    boxOffsetTop = $box.offset().top;

    jQuery("#scrollPane").scroll(function() {
        if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight) {
            jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
        }
    });
});

Dans ce code, $(this).scrollTop() renvoie le nombre de pixels que l'utilisateur défile du haut de l'élément, $(this).outerHeight() renvoie la hauteur de l'élément, et this.scrollHeight renvoie la hauteur du contenu de l'élément. Lorsque la somme du nombre de pixels et de hauteur d'élément est égale à la hauteur du contenu, cela signifie que l'utilisateur a fait défiler le bas de l'élément.

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!