在Google Chrome中使用jQuery检查滚动条是否到达底部

Question

我有一个 Django 项目，但无法使 jQuery 脚本在 Google Chrome 中运行。

用于检查滚动是否到达底部的简单代码：

 <script language="JavaScript" type="text/JavaScript">
    window.onload = function () {

       $('#scrolling').on('scroll', chk_scroll);
    };

    function chk_scroll(e) {

        var elem = $(e.currentTarget);
        if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
           alert("bottom")
        }
    }
</script>

它可以在Opera、Explorer、Firefox和Chrome中工作（作为单个html文件，不作为项目的一部分），也可以在jsfiddle上使用。

P.s jQuery能够正确加载并且其他脚本也可以正常运行。

- Victoria

---

你尝试过使用$( document ).ready()代替window.onload吗？ - palaѕн

是的，与setTimeout相同的结果 - Victoria

我并不认为这是问题所在，但您的语言和类型属性中的值是驼峰式的，而应该是小写的。更好的做法是，在普通脚本标签中可以省略它们。 - Taplar

这个有帮助吗？https://stackoverflow.com/a/28287574/7867822 - Anurag Srivastava

感谢您的建议，我学到了新的东西并找到了问题所在。Anurag，你的链接真的很有帮助！它是在缩放浏览器时使用cntrl+滚轮。我的Chrome默认缩放到105％，这5％就是问题所在。我只需要重新调整大小即可。 - Victoria

Answer 1

请尝试以下方法：

$( window ).on( 'scroll', checkScroll );


function checkScroll()
{
    const documentScrollTop     = $( document ).scrollTop();
    const documentOuterHeight   = $( document ).outerHeight();
    const windowOuterHeight     = $( window ).outerHeight();

    if ( documentScrollTop >= documentOuterHeight - windowOuterHeight )
    {
        //bottom
    }
}

你不需要使用除窗口以外的任何元素来检查是否触底

- stefantigro