Ajax 無限滾動功能未在移動設備上觸發

Question

我有一個網站，其中包含一個很像 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)

任何想法是什么問題？

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>

Answer 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
        },

它奏效了！