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中文网其他相关文章！