0

I just purchase Infinite Ajax Scroll after having difficulties trying to implement replaceState() with infinite scroll. I have managed to get everything set up to work correctly with the following code:

function infiniteScroll() {
    // Init infinite scroll
    var ias = $.ias({
      container:  '#masonry-filter',
      item:       '.post',
      pagination: '.nav-links',
      next:       '.nav-previous a'
    });

    // Run isotope on additional load
    ias.on('render', function(newElements) {
      $(newElements).css({ opacity: 0 });
    });
    ias.on('rendered', function( newElements ) {
      $('#masonry-filter').isotope( 'appended', $( newElements ) ); 
    });

    ias.extension(new IASTriggerExtension({ offset: 100 }));
    ias.extension(new IASPagingExtension());
    ias.extension(new IASHistoryExtension({prev: '.nav-next a' }));
}

As you may notice I'm using this along with Metafizzy's Isotope plugin. I am also using it within Wordpress and am hooking this onto the typical Wordpress pagination.

Although everything seems to work ok, it does not work the way that I had intended. My assumption was that it would work somewhat like http://tumbledry.org/, where after scrolling for some time, leaving the page, and clicking back in the browser, it takes the user to the exact same position they were in when clicking on the link. The plugin seems to be using replaceState() with the same url structure that WordPress uses by default for pagination (example.com/page/2). I don't know if this is done on purpose, or if it is a coincidence. As a result of this, when I click into a post and then hit the browser back button, it actually takes me to the example.com/page/2 page, where there is a button to show newer posts at the top of the page. It does not take me to the original posts page, nor to the exact spot on the page where the post is that I clicked (it usually takes me to the bottom of the page). In addition, when I click the button at the top of the page to show newer posts, it appends the newer posts to the bottom of the page (as you can see in my code).

I would like this to work as the tumbledry blog works. Where you can click on a link and then click the back button to get to the exact spot on the page that you were on (no need to load newer posts). Please let me know if this is possible, or if I have botched up the implementation. I would greatly appreciate any in depth information on the functionality because I'd like to figure out how I can get it working the way I want.

4

2 回答 2

0

Infinite AJAX Scroll 采用了一种与滚筒烘干机不同的方法。您说它会加载较新的页面，但在香草设置中，当您单击“加载更多”链接时，前一页的项目会被添加到前面。您当前的rendered听众没有考虑到这一点。

此外，如果您向后按，插件将恢复到大约您之前的偏移量，但不完全是。这将需要使用服务器端代码进行更高级的设置，并且会破坏此插件的目的：用于无限滚动的简单渐进增强，无需任何服务器端编码。

如果您真的想要像 tumbledry 这样的确切工作，它的作者有一篇关于他的实现的详细帖子：http: //tumbledry.org/2011/05/12/screw_hashbangs_building

于 2014-05-12T19:40:43.200 回答
0

Infinite AJAX Scroll 采用了一种与滚筒烘干机不同的方法。您说它会加载较新的页面，但在香草设置中，当您单击“加载更多”链接时，前一页的项目会被添加到前面。您当前呈现的侦听器没有考虑到这一点。

感谢您在这里的洞察力。

此外，如果您向后按，插件将恢复到大约您之前的偏移量，但不完全是。这将需要使用服务器端代码进行更高级的设置，并且会破坏此插件的目的：用于无限滚动的简单渐进增强，无需任何服务器端编码。

我知道这并不完美，但它总是让我回到页面的最底部（无限滚动下方的页脚区域）。我认为您需要在使用历史记录功能时使用按钮来触发无限滚动？

如果您真的想要像 tumbledry 这样的确切工作，它的作者有一篇关于他的实现的详细帖子：http: //tumbledry.org/2011/05/12/screw_hashbangs_building

我提出这个是因为我已经通过他的帖子并试图滚动我自己的无限卷轴但没有成功。

恕我直言，历史功能的用户体验虽然雄辩地结合了 WP 服务器端功能，但有点奇怪。登陆一个 Wordpress 分页页面，当你点击它时，必须点击一个按钮来显示最初在页面上的帖子。该插件很棒，我知道您正在使用可用的技术/功能。我想我现在只是坚持使用基本功能而不是使用“历史”。

于 2014-05-26T03:27:27.390 回答