無限スクロールを実装しようとして苦労した後、Infinite Ajax Scroll を購入しましたreplaceState()
。次のコードを使用して、正しく動作するようにすべてをセットアップすることができました。
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 ページに移動し、ページの上部に新しい投稿を表示するボタンがあります. 元の投稿ページに移動したり、投稿がクリックされたページ上の正確な場所に移動したりしません (通常、ページの下部に移動します)。さらに、ページの上部にあるボタンをクリックして新しい投稿を表示すると、新しい投稿がページの下部に追加されます (コードで確認できます)。
タンブルドリーブログが機能するように、これが機能することを望みます。リンクをクリックしてから戻るボタンをクリックすると、ページの正確な場所に移動できます (新しい投稿を読み込む必要はありません)。これが可能かどうか、または実装に失敗したかどうかをお知らせください。機能に関する詳細な情報をいただければ幸いです。希望どおりに動作させる方法を知りたいからです。