Question

目标是检测页面底部是否存在无限滚动功能，例如用于社交媒体供稿的功能。已经建议的解决方案主要包括：

if ($(window).scrollTop() + $(window).height() >= $(document).height()) {...}

这在桌面上运行良好，但在移动设备上，页面底部未被一致检测到。

以下是了解正在发生的事情的示例。这两种情况都是在测试页面上完全缩小时发生的，但实际数字会根据页面是否放大而有所不同。

iPad Chrome：在横向模式下，$(window).scrollTop() + $(window).height()将始终与$(document).height()
Galaxy S4 Chrome：在纵向模式下，$(window).scrollTop() + $(window).height()将始终与$(document).height()

在这两种情况下，如果用户要在页面上充分放大（通常一点点就够了），然后滚动到底部，则会检测到页面底部并发生无限滚动效果。毋庸置疑，假设用户将放大以触发无限滚动并不理想。有趣的是，在iPad Safari上检测底部工作正常。

我尝试了不同的解决方案，包括在James Padolsey getDocHeight() $(window).scrollTop()的另一篇帖子中建议的解决方案无济于事。詹姆斯的解决方案似乎没有帮助，因为看起来问题出现在if ($(window).scrollTop() + $(window).height() >= getDocHeight()) {...}，但无论如何我都试过了。

if ($(window).scrollTop() + $(window).height() + 100 >= $(document).height()) {...}

一个简单的解决方法是在语句的左侧添加一点，例如，100。但是，这似乎是一个廉价的黑客，可以很容易地被不同的设备/浏览器打破，所以更健壮的东西更可取

{{1}}

思想/建议？提前谢谢！

更新我从@Pomax那里得到了小费，并随之运行。手持https://stackoverflow.com/a/7557433/1634817后，无限分页现在正在运行。我最后在页面末尾添加了一个元素，每次该元素对用户可见时，都会加载下一组内容。

相关的StackOverflow问题：

Answer 1

使用视口方法的缩写解决方案，万一有人想要它：

<强> HTML

<body>
    <div id="content">
        <!-- Content goes here. //-->
        <div class="content-item"></div>
        <div class="content-item"></div>
    </div>
    <div id="get-additional">&nbsp;</div>
</body>

<强> JS

$(function(){

    // Get elements early so we don't keep looking for them on every scroll.
    var contentDiv = $("#content");
    var getAdditionalDiv = $("#get-additional");

    // Upon initial load, if the content doesn't fill up the viewport, load additional content. The exact code will depend on your case but in my case, I needed to do a timeout instead of a regular while loop.
    setInterval(function(){if (isElementInViewport(getAdditionalDiv[0])) { appendAdditionalContent(); }}, 500);

    $(window).scroll(function() {
        // isElementInViewport uses getBoundingClientRect(), which requires the HTML DOM object, not the jQuery object. The jQuery equivalent is using [0] as shown below.
        if (isElementInViewport(getAdditionalDiv[0])) {
            appendAdditionalContent();
        }
    });

    function appendAdditionalContent() {
        // Create/get the additional content (e.g., an ajax call).
        var $additionalContent = ... ;

        // Prevent infinite loops. Get rid of the additional div trigger once there is no more content to pull.
        if ( ... there is no $additionalContent ...) {
            getAdditionalDiv.remove();
        } else {
            // Append the additional content.
            contentDiv.append($additionalContent);
        }
    }

    // This function is verbatim from https://stackoverflow.com/a/7557433/1634817. As of this writing, this one is the currently recommended solution. There is a more robust solution in the thread as well. Use whichever you think best but both worked for me.
    function isElementInViewport (el) {
        var rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && //* or $(window).height()
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) //* or $(window).width()
        );
    }
});

<强>参考

如何检测页面底部？移动问题

1 个答案: