JQuery Erkennung von Scrollen nach unten - Lesen Sie T & C

Verwenden Sie die JQuery -Erkennung, um nach unten zu scrollen und das Kontrollkästchen der Allgemeinen Geschäftsbedingungen zu aktivieren, nachdem der Benutzer nach unten auf der Seite scrollen kann (oder DIV mit Scrollen).

Der folgende JQuery -Code -Snippet kann erkennen, ob der Benutzer bis zum Ende der Seite gescrollt hat:

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");
        }
    });
});

Nutzungsbedingungen sind hier

hier

Ich akzeptiere die oben genannten Begriffe.

FAQs über JQuery Scrollen nach unten (FAQs)

Wie kann ich JQuery verwenden, um zu erkennen, wann ein Benutzer am Ende der Seite scrollt?

scroll Verwenden Sie JQuery, um zu erkennen, wann ein Benutzer am Ende der Seite scrollt. Das Ereignis scrollTop wird jedes Mal abgefeuert, wenn der Bildlauf auftritt, und das scrollHeight -Treizattribut gibt die Anzahl der Pixel zurück, in denen der Elementinhalt vertikal scrolliert wird. Das Attribut scroll gibt die Gesamthöhe des Elements in Pixeln zurück, einschließlich Polsterung, jedoch nicht Grenzen, Scrollstangen oder Rändern. Hier ist ein einfaches Beispiel: scrollTop scrollHeight

In diesem Code gibt

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

die Anzahl der Pixel zurück, die die Benutzer Scrollen von oben,

die Höhe des Ansichtsfenfers zurückgibt und $(window).scrollTop() die Höhe des Dokuments zurückgibt. Wenn die Anzahl der gescrollten Pixel und die Ansichtsfensterhöhe der Höhe des Dokuments entspricht, bedeutet dies, dass der Benutzer nach unten gescrollt hat. $(window).height() $(document).height() Wie kann ich JQuery verwenden, um automatisch nach unten auf der Seite zu scrollen?

Um JQuery zu verwenden, um automatisch zum Ende der Seite zu scrollen, können Sie die Methode

und

Attribute in Kombination verwenden. Die animate -Methode führt eine benutzerdefinierte Animation eines Satzes von CSS -Attributen aus. Hier ist ein einfaches Beispiel: scrollTop height animate In diesem Code scrollt scrollTop das Dokument mit langsamer Animationsgeschwindigkeit nach unten. Die Eigenschaft height wird auf die Höhe des Dokuments gesetzt, was bedeutet, dass die Seite nach unten scrollt.

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

Wie kann ich JQuery verwenden, um zu erkennen, wann ein Benutzer am Ende eines bestimmten Elements scrollt?

$("html, body").animate({scrollTop: $(document).height()}, "slow"); Um JQuery zu erkennen, wenn ein Benutzer nach unten in einem bestimmten Element scrollt, können Sie das Ereignis scrollTop mit

,

und

in Kombination verwenden. Das Ereignis wird jedes Mal abgefeuert, wenn der Bildlauf auftritt. Hier ist ein einfaches Beispiel:

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");
        }
    });
});

In diesem Code gibt $(this).scrollTop() die Anzahl der Pixel zurück, die die Benutzer Scrollen von der Oberseite des Elements, $(this).outerHeight() die Höhe des Elements zurückgibt und this.scrollHeight die Höhe des Elementinhalts zurückgibt. Wenn die Summe der Anzahl der Scrolled -Pixel und der Elementhöhe gleich der Inhaltshöhe ist, bedeutet dies, dass der Benutzer nach unten im Element gescrollt hat.

Das obige ist der detaillierte Inhalt vonJQuery Erkennung von Scrollen nach unten - Lesen Sie T & C. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!