Question

假设我有这样的情况：

页面长度为4000像素。
用户向下滚动页面，因此在视口上方隐藏了1000像素的内容。

然后，用户单击一个按钮，通过页面顶部的AJAX加载任意长度的内容，按下视口下方的按钮（以及用户正在查看的内容）。

我尝试编写Javascript回调以向下滚动到用户在点击按钮之前看到的内容，但体验不是无缝的（插入新内容时滚动“向上”，然后滚动回“向下”）。

有没有办法让视口固定在用户正在查看的内容上？

这是一个简化的例子，但应该明白这一点。

<div style="height: 1000px; width:1000px;" id="top-div">some content above the fold</div>
<button id="button">Click Me</button>
<img src="img.jpg" alt="Some image the user was looking at when they clicked the button." />

<script>
$("button").click(function() {
    $.get('/new/content', function(response) {
        $("#top-div").before(response);
    });
});
</script>

Answer 1

看看这个小提琴： http://jsfiddle.net/FYEYB/

这是重要的代码：

$("button").click(function() {
  //cache the org height
  var orgHeight = $("#content").height();
  //run your ajax request.
  mockAjax(function() {
    //in the callback ajust the height
    $(window).scrollTop($(window).scrollTop() + $("#content").height() - orgHeight);
  });
});

基本上在ajax请求的回调中，将容器高度的差异添加到之前的差异。您可能需要添加一个检查以确保新内容确实添加到视口上方，但我会让您解决这个问题。

Answer 2

延迟显示新内容

最让人想到的优雅解决方案是延迟显示新内容，直到它在视口内或下方。换句话说，不要更改视口上方的任何主要布局元素的高度;当它们在视口内部或下方时更改它们，当它不会造成任何伤害时。 在安全的情况下显示它们。

例如，用户滚动到非常高的页面的底部三分之一。当他们在那里时，一些新的或不同大小的Ajax内容被加载到页面顶部附近，但它还没有显示。用户向上滚动浏览页面，一旦所有受影响的布局区域滚动到视图中，就会显示新内容，就好像它刚刚加载一样。

基本上，当加载Ajax内容时，检索layout元素的滚动位置，并根据页面的当前滚动位置显示内容或将其添加到队列中。每当用户滚动页面或单击锚标记（或任何更改页面滚动位置的操作）时，检查队列以查看是否还有任何内容仍需要显示，并确定它现在是否可以安全显示。

使内容可折叠

另一种选择是让Ajax内容以可折叠的格式显示。它最初可以显示为不影响页面布局的小尺寸（如果布局元素位于视口上方）。然后，用户可以单击内容以在折叠格式和完整版本之间切换，或者在上一个想法的变体中，当布局元素滚动到视图中时，它可以自动扩展。

页面长度更改时保持页面位置

2 个答案: