Question

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

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

这是我正在使用的功能：

<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。 / p>

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

任何想法是什么问题？

Answer 1

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

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

Answer 2

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

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

Ajax无限滚动功能无法在移动设备上触发

2 个答案: