history.pushState()ユーザーが映画のリストをスクロールするときにブラウザの URL を変更しようとしています。Twitter スタイルのページネーションで django-endless-pagination を使用しています。
What I would like to do is, as the user continually scrolls up or down the current list of movies, the URL would change. Say the user scrolls down to page 9, the URL gets updated to /?page=9. But if the user scrolls back up to page 2, the URL should get updated to /?page=2.
The result is, if the user clicks on a link and then hits the back button they are brought back to the last 'page' they were on.
This works going forward with django-endless-pagination, but I want it to work in reverse if the user scrolls back up the page. I think that jquery-waypoints is the answer to my problem.
I have this generated as the pages are loaded via Ajax:
<li style="display: none">
<div id="waypoint1" class="waypoint" data-request-path="/movie/?page=1"></div>
</li>
Each one of these gets a unique id and has a class of waypoint. The data-request-path is the current 'page' path.
I have attempted to use:
$(".waypoint").waypoint(function() {
history.pushState({scrollTop:document.body.scrollTop},document.title,$(this.element).attr("data-request-path"));
});
最初にウェイポイントを通過するときは機能しますが、追加のウェイポイントを通過するときは機能しません。これらの追加のウェイポイントは、ユーザーがスクロールするときに Ajax を介して追加の結果が取得されるまで、ドキュメントに存在しません。
ウェイポイントがスクロールされてページに表示されるときに URL が変更されるようにするには、どうすればよいですか?