滚动 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');
    }
});

我需要做的，但不知何故遗漏的，是更改 "acknowledge" 检查是否有人滚动了。条件不工作 -> 澄清一下，如果有人选中复选框 "acknowledge" 并且没有滚动到 "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

我会隐藏复选框，直到用户到达页面末尾。您可以使用类似 Jquery 的鼠标悬停或鼠标悬停在用户到达底部时显示框。

Answer 2

首先，您使用的是 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

Answer 3

我无法利用 jQuery.appear 或 appear.js，因为这些库隐式处理 DOM 视口而不是元素视口。因此，这里的代码会在用户手动滚动浏览协议内容（最底部）之前取消选中复选框。

HTML

<div id="step2Disclaimer">
    <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 class='agreement_read'>?</div>
</div>

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

CSS

#step2Disclaimer {
    width: 315px;
    border: solid 1px #ACE;
    margin-bottom: 15px;
    height: 115px;
    overflow-y: scroll;
    font-family: arial;
    font-size: 1rem;
    padding: 3px;
}

.unread {
    cursor: not-allowed;
    border: dashed 1px red;
    padding: 3px;
    color: #CCC;
}

.fully_read {
    border: solid 1px green;
    padding: 3px;
}

JavaScript

var master_agreement = document.getElementById('step2Disclaimer');

jQuery(master_agreement).scroll(function(e) {
    if (isScrolledToBottom(master_agreement) && jQuery('.unread').length) {
        jQuery('.unread').removeClass('unread').addClass('fully_read');
        jQuery('#acknowledge').prop('disabled', false);
    }
});

//Chris Martin of Whosebug - 
function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

var master_agreement = document.getElementById('step2Disclaimer');

jQuery(master_agreement).scroll(function(e) {
    if (isScrolledToBottom(master_agreement) && jQuery('.unread').length) {
        jQuery('.unread').removeClass('unread').addClass('fully_read');
        jQuery('#acknowledge').prop('disabled', false);
    }
});

//Chris Martin of Whosebug - 
function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

#step2Disclaimer {
    width: 315px;
    border: solid 1px #ACE;
    margin-bottom: 15px;
    height: 115px;
    overflow-y: scroll;
    font-family: arial;
    font-size: 1rem;
    padding: 3px;
}

.unread {
    cursor: not-allowed;
    border: dashed 1px red;
    padding: 3px;
    color: #CCC;
}

.fully_read {
    border: solid 1px green;
    padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="step2Disclaimer">
    <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 class='unread' type="checkbox" id="acknowledge" name="acknowledge" value="true" disabled>
<label class="styled unread" for="acknowledge">I acknowledge</label>

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

Scrolling div must be scrolled to bottom before you can check a checkbox

css

checkbox

jquery

scroll

onchange