Ajax无限滚动功能未在移动设备上触发答案

【问题标题】：Ajax infinite scroll function not firing on mobileAjax无限滚动功能未在移动设备上触发
【发布时间】：2014-08-19 18:39:50
【问题描述】：

我有一个网站，其中包含很像 facebook 的新闻源。当用户到达页面底部时，此新闻源利用无限滚动。当在桌面浏览器上查看网站时，一切正常，但是当在我的 iphone 上查看时，除非我慢慢滚动到触发点，否则该功能不会触发。

为了澄清，如果我以正常速度一直滚动到底部，它会超过函数应该触发的点并且没有任何反应。如果我然后稍微缓慢地向后滚动页面（大约 100 像素），该函数将被调用。同样，如果我碰巧缓慢地向下滚动页面，该函数将被调用。因此，当我快速滚动（或正常速度）时，不会调用该函数。

这是我正在使用的功能：

<script language="javascript">
            $(document).ready(function() {
               //Variable declarations for function
                $(window).scroll(function() {
                    if($(window).scrollTop() == $(document).height() - $(window).height()) {
                        //Function goes here
                    }
                })
            });
        </script>

我尝试将 if 语句条件替换为以下条件，该条件可用于触发函数，但所有帖子都会立即加载，而不是每次用户到达页面底部时加载 5 个。

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 60)

任何想法是什么问题？

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

触控设备有自己的事件，因此您必须同时捕捉两者。看看这是否有帮助：

<script language="javascript">

        // infiniteScroll function
        function infiniteScroll() {
                if($(window).scrollTop() == $(document).height() - $(window).height()) {
                    //Function goes here
                }
            }
        $(document).ready(function() {
            // bind the function to all needed events
            $(window).on('scroll',infiniteScroll);
            $(window).on('touchmove',infiniteScroll);
        });
    </script>

【讨论】：

此解决方案无法解决我在移动设备上的问题 - Android 9
touchmove 事件触发，但当我滚动到页面底部时它不会触发该功能。但它在桌面上完美运行。

【解决方案2】：

对于移动设备，您需要绑定名为touchmove 的附加事件：

$('html,body').bind('touchmove', function(e) { 
    //you code here
});

【讨论】：

【解决方案3】：

我认为这是因为android状态栏的高度，在这样的事情上，因为当我写的时候：

if (document.documentElement.offsetHeight+document.documentElement.scrollTop-document.documentElement.scrollHeight > 0) {
          //load more list here
        },

没有在移动设备上工作，所以我一直在监控结果

document.documentElement.offsetHeight+document.documentElement.scrollTop-document.documentElement.scrollHeight

上下滚动时，结果的最大值几乎是 -56（在我的设备中：三星 A70），所以我更改了如下代码：

if (document.documentElement.offsetHeight+document.documentElement.scrollTop-document.documentElement.scrollHeight + 100 > 0) {
          //load more list here
        },

它成功了！

【讨论】：