3

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 更改?

4

0 回答 0