jQuery：无限滚动和后退按钮

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.It is a bit old may be the answer for you. Here is a link to an infinite scroll demo 使用它。

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

Answer 2

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

这就是说的...

Many apps today have some concept of an infinite scrolling feed: Facebook, Twitter, LinkedIn and many more. Almost all of them suffer from the same problem. If you click on something in the feed that brings you to a new page, when you hit the back button or try to return to that original feed, your place is lost. All the scrolling is gone. At Highrise we had that same problem. So this is the library we use to fix that. We call it our Snapback Cache, and it's made a big improvement to how people can use infinite scroll in our app and still get a lot of work done without losing their place.

Answer 3

我们通过以下组合解决了这个问题：(1) 在新标签页中打开无限滚动页面上链接到的页面； (2) using javascript to return to parent.

由于我看到很多关于 returning 给家长的困难的评论，我在下面发布了我们的代码。这两个函数被放入用于导航按钮的锚标记中的 onclick 属性中。

使用父项的名称 window 解决了在 return 到父项之前打开的中间选项卡的问题；否则，return编辑到的选项卡可能是最近打开的选项卡，而不是父选项卡。

/**
 * 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：无限滚动和后退按钮

jQuery: infinite scroll and the back button

javascript

jquery

html

jquery-isotope

infinite-scroll

这就是说的...