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

Posted 2023-05-09

【中文标题】根据滚动位置有条件地禁用和启用按钮？

【英文标题】：Disable and Enable button conditionally based on scroll position?

【发布时间】：2015-01-02 06:43:39

【问题描述】：

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

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

【问题讨论】：

您希望您的用户能够点击它们直到它们被看到？为什么？

我希望你把它打反了...

不，我希望按钮变灰，直到用户滚动到底部。因此，在滚动到容器底部之前，他将无法单击按钮

但是用户肯定不能点击按钮，直到它们可见？在用户选中复选框（或以其他方式肯定地进行交互）之前，我可以理解禁用按钮，但这似乎毫无意义。

是的，它们是可见的！！您只能在容器内向下滚动，但按钮固定在页面中

【参考方案1】：

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

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

用这个：

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

【讨论】：

我刚刚更换了它，但仍然无法正常工作。只是在上面使用了不同的代码，但仍然无法正常工作。你能看一下吗？

您使用什么浏览器无法正常工作？什么版本的jquery？我会问一个愚蠢的问题——如果用户必须滚动到文本区域的底部才能看到按钮，那么按照你的要求禁用它们有什么区别——或者它们只是不可见？无论哪种方式都可以实现相同的目标。你可以将按钮“停靠”到底部并禁用，直到滚动完成，我想......

我正在使用 chrome，但它在我的本地文件中不起作用我还没有将它上传到服务器。好吧，按钮固定在页面中，只有你可以滚动的文本..我使用的是 1.10.3 jquery 我刚刚使用纯 js 复制了上面显示的确切教程，但仍然无法正常工作:(

如果按钮真正固定在页面上，如果您有修复它们的随附 CSS 会有所帮助。如果您可以发布该页面，我会看看它。

【参考方案2】：

我认为您应该在比较中使用 clientHeight。

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

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

我创建了这个jsfiddle，它似乎对我很有效。

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