jQuery檢測到滾動到底部 - 閱讀T＆C

使用jQuery檢測滾動到底部，並在用戶滾動到頁面底部（或帶有滾動的div）後啟用條款和條件複選框。

以下jQuery代碼片段可以檢測用戶是否已滾動到頁面底部：

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

服務條款內容在此處

我接受以上條款。

關於jQuery滾動到底部的常見問題 (FAQs)

如何使用jQuery檢測用戶何時滾動到頁面底部？

使用jQuery檢測用戶何時滾動到頁面底部，您可以結合使用scroll事件和scrollTop以及scrollHeight屬性。 scroll事件在每次滾動發生時觸發，scrollTop屬性返回元素內容垂直滾動的像素數。 scrollHeight屬性返回元素的總高度（以像素為單位），包括填充，但不包括邊框、滾動條或邊距。以下是一個簡單的示例：

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

在此代碼中，$(window).scrollTop()返回用戶從頂部滾動的像素數，$(window).height()返回視口的高度，$(document).height()返回文檔的高度。當滾動像素數與視口高度之和等於文檔高度時，表示用戶已滾動到底部。

如何使用jQuery自動滾動到頁面底部？

要使用jQuery自動滾動到頁面底部，您可以結合使用animate方法和scrollTop以及height屬性。 animate方法執行對一組CSS屬性的自定義動畫，scrollTop屬性返回元素內容垂直滾動的像素數，height屬性返回元素的高度（以像素為單位）。以下是一個簡單的示例：

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

在此代碼中，$("html, body").animate({scrollTop: $(document).height()}, "slow");以緩慢的動畫速度將文檔滾動到底部。 scrollTop屬性設置為文檔的高度，這意味著頁面將滾動到底部。

如何使用jQuery檢測用戶何時滾動到特定元素的底部？

要使用jQuery檢測用戶何時滾動到特定元素的底部，您可以結合使用scroll事件和scrollTop、scrollHeight以及outerHeight屬性。 scroll事件在每次滾動發生時觸發，scrollTop屬性返回元素內容垂直滾動的像素數，scrollHeight屬性返回元素的總高度（以像素為單位），包括填充，但不包括邊框、滾動條或邊距，outerHeight屬性返回元素的高度（以像素為單位），包括填充、邊框和可選的邊距。以下是一個簡單的示例：

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

在此代碼中，$(this).scrollTop()返回用戶從元素頂部滾動的像素數，$(this).outerHeight()返回元素的高度，this.scrollHeight返回元素內容的高度。當滾動像素數與元素高度之和等於內容高度時，表示用戶已滾動到元素的底部。

以上是jQuery檢測到滾動到底部 - 閱讀T＆C的詳細內容。更多資訊請關注PHP中文網其他相關文章！