Question

好的，所以我知道这会给每个人带来问题，而且这也会给我带来麻烦。我在客户的网站上使用无限滚动插件，结合同位素插件顺序加载他们的产品，问题是因为他们有1000个产品，任何人浏览网站然后点击产品，当他们点击后退按钮它们将返回到顶部（或仅在第一页的折叠上方），这导致了很多问题。

我的标记如下：

$(window).load(function () {

    var $container = $('.products-grid-wrap');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.products-grid-block',
            filter: '*:not(.hidden), .products-grid-block',
            animationEngine: 'best-available',
            layoutMode: "perfectMasonry",
            perfectMasonry: {
              columnWidth: 280,
              rowHeight: 310
            }
        });         

        $container.infinitescroll({
            navSelector: '#page_nav', // selector for the paged navigation 
            nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
            itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve
            pixelsFromNavToBottom: Math.round($(window).height() * 1.5),
            bufferPx: Math.round($(window).height() * 1.5),
            loading: {
                finishedMsg: 'No more products to load.',
                img: 'http://www.by-form.net/wp-content/uploads/2014/11/ajax-loader-big.gif'
            }
        },
        // call Isotope as a callback
        function (newElements) {
            var $newElems = $(newElements);
            $newElems.imagesLoaded(function () {
                $container.isotope('insert', $newElems);
                $('.products-grid-rollover-block').hide();                 
                   if(newElements.length > 0){
                       setTimeout(function () {
                            $container.infinitescroll('retrieve');
                            $('.products-grid-wrap').isotope('reLayout');
                            //$('.products-grid-wrap').isotope({
                            //sortBy: 'category',
                                //sortAscending: false });
                        }, 1000);
                   }

            });
        }); 

        setTimeout(function () {
            $container.infinitescroll('retrieve');
        }, 3000); 

    });

});

任何解决方案或建议都会受到大力赞赏！

Answer 1

你可以试试scroll-frame。它有点旧可能是你的答案。以下是使用它的infinite scroll demo的链接。

scrollFrame会劫持用户单击与您传入的查询选择器匹配的元素，而不是重新加载页面，它会附加一个类似于模式的iframe，它位于视口顶部并指向元素＆＃ 39; s href。然后，它使用HTML5历史API使按钮功能按预期运行。

Answer 2

这可能是解决此类问题的新方法。 https://github.com/highrisehq/snapback_cache

这就是说什么......

今天许多应用都有一些无限滚动的概念：Facebook，Twitter，LinkedIn等等。几乎所有人都遭遇同样的问题。如果您点击Feed中的某些内容即可转到新页面，当您点击后退按钮或尝试返回原始Feed时，您的地点就会丢失。所有滚动都消失了。在Highrise，我们遇到了同样的问题。所以这是我们用来修复它的库。我们将其称为Snapback Cache，它对人们如何在我们的应用程序中使用无限滚动进行了重大改进，并且仍然可以在不失去位置的情况下完成大量工作。

Answer 3

我们通过以下组合解决了这个问题：（1）在新标签页中打开无限滚动页面上链接到的页面； (2) 使用javascript返回父级。

因为我看到很多关于返回父级的困难的评论，我在下面发布我们的代码。这两个函数放在导航按钮使用的锚标记中的 onclick 属性中。

使用父窗口的名称，解决了在返回父窗口之前插入标签打开的问题；如果没有这个，返回的标签可能是最近打开的标签，而不是父标签。

/**
 * open url in separate tab
 * saves name of parent window for easy return
 * @param url
 */
function gotoTab(url)
{
    window.name = 'parent';
    window.open(url);
}

/**
 * uses name of parent
 */
function returnToParent()
{
    var goBack = window.open('', window.opener.name);
    window.top.close();
    goBack.focus();
}

jQuery：无限滚动和后退按钮

3 个答案:

这就是说什么......