jquery - 滚动 div 必须滚动到底部才能选中复选框

Question

我有一个包含免责声明的 div，我想确保有人已滚动到免责声明的底部，然后您才能选中确认您已阅读免责声明的复选框。法律部这是一个示例标记:

<div id="step2Disclaimer" style="height:50px;overflow-y:scroll">
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>                             
</div>

<input type="checkbox" id="acknowledge" name="acknowledge" value="true">
<label class="styled" for="acknowledge">I acknowledge</label>

我可以检测到有人滚动到 #acknowledge 的底部，如下所示:

$('#step2Disclaimer').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
    alert('end reached');
    }
});

我需要做的，并且不知何故缺少的，是更改“确认”检查以查看是否有人滚动。该条件不起作用 -> 澄清一下，如果有人选中“确认”复选框并且没有滚动到“step2Disclaimer”的底部，我需要运行一个函数。

$(function() {
    $('input[name="acknowledge"]').change(function(){
        if ($(this).is(':checked') && ($('#step2Disclaimer').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) {
            alert('checked but not scrolled');
        }
    });
});

Answer 1

首先，您使用的是 this，它以复选框为目标，而不是以 div 为目标。其次，您需要检查 scrollTop 加上 innerHeight 是否小于而不是大于 scrollHeight。以下内容应该有效:

$(function() {
    $('input[name="acknowledge"]').change(function(){
        if ($(this).is(':checked') && ($('#step2Disclaimer').scrollTop() + $('#step2Disclaimer').innerHeight() < $('#step2Disclaimer')[0].scrollHeight)) {
            alert('checked but not scrolled');
        }
    });
});

Working Fiddle