查询 Waypoints 需要双向滚动答案

【问题标题】：Query Waypoints need to scroll in both directions查询 Waypoints 需要双向滚动
【发布时间】：2017-07-05 20:37:52
【问题描述】：

我正在使用jQuery-waypoints and the infinite shortcut 在我的页面上加载列表。我让这一切正常工作，并试图通过使用 pushState() 更改浏览器历史记录来遵守Google's Guidelines。使用它一切正常。

if ($('#list-col.active .list-col-content').length > 0 && !wayPoints) {
    initWaypoint();
}
;
function initWaypoint() {
    let infinite = new Waypoint.Infinite({
        element: $('#list-col.active .list-col-content'),
        offset: function () {
            return this.context.innerHeight() - this.adapter.outerHeight() + 2000
        },
        onAfterPageLoad: function (direction) {
            var last = $('.page-loaded:last');
            last.waypoint(function (direction) {
                if (direction == 'down') {
                    if (window[window.GoogleAnalyticsObject]) {
                        ga('set', 'page', last.data('url'));
                        ga('send', 'pageview');
                        console.log('pageview ' + last.data('url'));
                    }
                    history.pushState('', last.data('title'), last.data('url'));
                } else {
                    history.pushState('', last.data('prev_title'), last.data('prev_url'));
                }
            })
        }
    });
    wayPoints = true;
};

这是我的问题/问题。

新浏览器的 URL 现在是 https://www.example.com/listingpage?page=15。根据 Google 的指南，该“组件页面”需要加载包含第 15 页列表的内容，并且仅加载第 15 页的内容。没问题，我可以做到。但现在我对第 15 页之前的内容有疑问。

我现在需要向上滚动，在用户向上滚动时加载更多内容（现在位于现有内容之上）。

我不知道如何添加第二个无限（实际上是有限的，因为它正在加载到 0）滚动器，它在您向上滚动页面时加载页面。

我知道我不是第一个遇到这种情况的人，所以任何帮助或指导将不胜感激。

【问题讨论】：

标签： infinite-scroll jquery-waypoints

【解决方案1】：

几天没有回复，所以我自己研究并找到了答案。在此处发布一些信息，以防其他人在双向无限滚动时遇到同样的问题。

我发现的最佳解决方案是在 Google 的 Infinite Scroll search-friendly recommendations 上。该页面列出了infinite scroll with pagination demo。我必须针对我的特定用途进行一些修改，但这是一个很好的示例，显然遵循 Google 的建议是一个好方法。

希望这对某人有所帮助。

【讨论】：