Question

我正在使用TERMS OF USE页面。我有两个按钮（同意和拒绝）并希望它们被解锁，直到用户滚动到该容器的底部。有人可以帮我修改我的代码吗？谢谢！

<div id="container_terms" name="container_terms">
    TEXT
    TEXT
    TEXT
</div>
<p align="center">
<input type="button" name="agree" class="agree" value="Agree" disabled />
<input type="button" name="decline" class="decline" value="Decline" disabled/>
</p>


<script type="text/javascript">
   document.getElementsByName("container_terms")[0].addEventListener("scroll", checkScrollHeight, false);

        function checkScrollHeight(){
            var agreementTextElement = document.getElementsByName("container_terms")[0] 
            if ((agreementTextElement.scrollTop + agreementTextElement.offsetHeight) >= agreementTextElement.scrollHeight){
                document.getElementsByName("agree")[0].disabled = false;
            }
        }

</script>

Answer 1

假设您要确保在启用按钮之前滚动到页面底部...替换它：

if ($win.scrollTop() == 0)

用这个：

if($win.scrollTop() + $win.height() == $(document).height())

Answer 2

我相信你应该在比较中使用clientHeight。

(agreementTextElement.scrollTop + agreementTextElement.clientHeight) >= agreementTextElement.scrollHeight

scrollHeight和clientHeight会考虑容器的内容和填充，而offsetHeight还包括边框和垂直滚动条。

我创建了这个jsfiddle，这似乎对我有用。

另请注意，在您的处理程序中，您只能获得同意按钮，而不是启用拒绝按钮。

根据滚动位置有条件地禁用和启用按钮？

2 个答案: