Question

我正在使用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;
};

这是我的问题/问题。

新浏览器的网址现在为https://www.example.com/listingpage?page=15。根据Google的指南，该＆＃34;组件页面＆＃34;需要使用第15页的商家信息加载内容，并且只需加载第15页的内容。没问题，我可以做到。但现在我在第15页之前遇到了内容问题。

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

我对如何在向上滚动页面时添加第二个无限（真正有限，因为它加载到0）滚动条感到茫然。

我知道我不是第一个遇到这种情况的人，所以任何帮助或指示都会受到赞赏。

Answer 1

几天没有回复，所以我自己研究并找到答案。在这里发布一些信息以防其他人在两个方向上无限滚动都有同样的问题。

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

希望这有助于某人。

查询航点需要在两个方向上滚动

1 个答案: