history.pushState()
当用户滚动浏览电影列表时,我试图使用它来更改浏览器 URL。我正在使用 django-endless-pagination 及其 Twitter 风格的分页。
我想做的是,随着用户不断向上或向下滚动当前的电影列表,URL 会改变。假设用户向下滚动到第 9 页,URL 更新为/?page=9
. 但是,如果用户向上滚动到第 2 页,则 URL 应更新为/?page=2
.
结果是,如果用户点击一个链接,然后点击后退按钮,他们就会回到他们所在的最后一个“页面”。
这适用于 django-endless-pagination,但如果用户向上滚动页面,我希望它反向工作。我认为 jquery-waypoints 是我的问题的答案。
当页面通过 Ajax 加载时,我生成了这个:
<li style="display: none">
<div id="waypoint1" class="waypoint" data-request-path="/movie/?page=1"></div>
</li>
其中每一个都有一个唯一的 id 并具有一类航点。data-request-path 是当前的“页面”路径。
我试图使用:
$(".waypoint").waypoint(function() {
history.pushState({scrollTop:document.body.scrollTop},document.title,$(this.element).attr("data-request-path"));
});
这在我们第一次通过航点时有效,但在通过其他航点时不起作用。这些额外的路点在文档中不存在,直到用户滚动时通过 Ajax 拉出额外的结果。
我需要做什么才能让航点在滚动到页面并显示在页面上时导致 URL 更改?