我在尝试使用无限滚动实现replaceState()
时遇到困难后才购买Infinite Ajax Scroll。我已设法使用以下代码使所有设置正常工作:
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' }));
}
您可能已经注意到我将这个与Metafizzy的Isotope插件一起使用。我也在Wordpress中使用它,并将其挂在典型的Wordpress分页上。
虽然一切似乎都运转正常,但它并没有按照我的预期方式运作。我的假设是它的工作方式有点像http://tumbledry.org/,在滚动一段时间后离开页面,然后在浏览器中单击后,它会将用户带到与点击链接时完全相同的位置。该插件似乎使用replaceState()
与WordPress默认用于分页的相同url结构(example.com/page/2)。我不知道这是出于故意,还是巧合。因此,当我点击一个帖子然后点击浏览器后退按钮时,它实际上将我带到example.com/page/2页面,其中有一个按钮,用于在页面顶部显示较新的帖子。它不会将我带到原始帖子页面,也不会带到我点击帖子的页面上的确切位置(通常会将我带到页面底部)。此外,当我单击页面顶部的按钮以显示较新的帖子时,它会将较新的帖子附加到页面底部(您可以在我的代码中看到)。
我希望这可以在翻滚博客的工作中发挥作用。在哪里可以单击链接,然后单击后退按钮以到达您所在页面上的确切位置(无需加载新帖子)。如果可能,或者如果我搞砸了实施,请告诉我。我非常感谢有关功能的任何深入信息,因为我想知道如何让它按照我想要的方式运行。
答案 0 :(得分:0)
无限的AJAX Scroll采用了不同的方法,然后是翻滚的方法。你说它加载了较新的页面,但在一个vanilla设置中,当你点击“加载更多”链接时,前一页的项目会被添加。您当前的rendered
听众不会考虑此问题。
此外,如果您按回来,插件将回到大约您的偏移,但不完全。这需要使用服务器端代码进行更高级的设置,并且会破坏此插件的目的:无限滚动的简单渐进增强,无需任何服务器端编码。
如果您真的想要像翻滚一样精确地工作,作者会详细介绍他的实施:http://tumbledry.org/2011/05/12/screw_hashbangs_building
答案 1 :(得分:0)
无限的AJAX Scroll采用了不同的方法,然后是翻滚的方法。你说它加载了较新的页面,但在一个vanilla设置中,当你点击“加载更多”链接时,前一页的项目会被添加。您当前呈现的侦听器不会考虑此问题。
感谢您的见解。
此外,如果你按回来,插件会回到大约你的偏移,但不完全是。这需要使用服务器端代码进行更高级的设置,并且会破坏此插件的目的:无限滚动的简单渐进增强,无需任何服务器端编码。
我知道这不会是完美的,但它总是让我回到页面的最底部(页脚区域位于无限卷轴下方)。我认为你需要使用一个按钮来触发无限滚动,同时使用历史记录功能?
如果您真的希望像翻滚一样精确地工作,其作者会详细介绍其实施情况:http://tumbledry.org/2011/05/12/screw_hashbangs_building
我提出这个问题是因为我已经完成了他的职位并试图推出我自己的无限卷轴而没有成功。
恕我直言,历史功能的用户体验虽然雄辩地结合了WP服务器端功能,但有点奇怪。登陆Wordpress分页页面并且必须单击按钮以显示最初在页面上的帖子,当您单击它时。该插件非常棒,我知道您正在利用可用的技术/功能。我想我现在只是坚持使用基本功能而不是使用“历史”。