jQuery:无限滚动和后退按钮

用户1374796

好的,所以我知道这会引起每个人的问题,并且也会引起我的问​​题。我正在客户网站上使用无限滚动插件,并与同位素插件结合使用,以便按顺序加载其产品,但问题是,由于他们有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); 

    });

});

任何解决方案或建议将不胜感激!

Mac支持

您可以尝试滚动框架。它可能有点旧,可能是您的答案。这是使用它无限滚动演示的链接

scrollFrame将劫持用户单击的元素,以匹配与您传入的查询选择器匹配的元素,而不是重新加载页面,它会在视口顶部附加一个类似于模式的iframe,并指向该元素的href。然后,它使用HTML5历史记录API来使后退按钮功能达到预期的效果。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery加载更多按钮,然后在Rails App中无限滚动

来自分类Dev

后退按钮和ViewPager

来自分类Dev

后退按钮和ViewPager

来自分类Dev

createDrawerNavigator 和后退按钮

来自分类Dev

虚拟“后退按钮” jQuery

来自分类Dev

jQuery无限页面滚动

来自分类Dev

jQuery同位素:无限滚动和过滤

来自分类Dev

使后退按钮和操作栏后退相同

来自分类Dev

后退按钮上的Angular 10滚动位置

来自分类Dev

无限滚动与AngularJs和Firebase

来自分类Dev

Rails和JS:无限滚动

来自分类Dev

无限滚动,分页和路线

来自分类Dev

ViewPager,FragmentStatePagerAdapter和无限滚动

来自分类Dev

没有jQuery的无限滚动?

来自分类Dev

jQuery使用图像的无限滚动

来自分类Dev

jQuery无限滚动固定div中的滚动

来自分类Dev

jQuery无限滚动固定div中的滚动

来自分类Dev

ActionBar后退按钮和android后退按钮之间的区别

来自分类Dev

硬件后退按钮和导航栏后退按钮之间的区别

来自分类Dev

jQuery计算按钮滚动

来自分类Dev

Android-覆盖ActionBar后退和设备后退按钮

来自分类Dev

jQuery ajax发布调用,ajaxify历史记录和后退按钮

来自分类Dev

使用隐藏和显示(jquery)时使浏览器的后退按钮起作用

来自分类Dev

jQuery选项卡的“下一步”和“后退”按钮

来自分类Dev

如何使用jQuery和PHP在Giphy API中进行无限滚动?

来自分类Dev

在Android中隐藏首页和后退按钮

来自分类Dev

快速更改后退按钮的字体和颜色

来自分类Dev

Android碎片和“后退”按钮问题

来自分类Dev

在Android中隐藏首页和后退按钮