滚动 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

Answer 2

我无法利用 jQuery.appear 和 append.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 StackOverflow - https://stackoverflow.com/a/32283147/5076162
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 StackOverflow - https://stackoverflow.com/a/32283147/5076162
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>

Answer 3

我会隐藏复选框，直到用户到达页面末尾。当用户到达底部时，您可以使用 Jquery 的悬停或鼠标悬停来使框出现。