5

假设我有这样的情况：

  • 页面长 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>
4

2 回答 2

3

延迟显示新内容

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

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

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

使内容可折叠

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

于 2013-01-09T23:00:27.957 回答
2

看看这个小提琴：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 请求的回调中，将容器高度的差异添加到之前的高度。您可能需要添加检查以确保确实在视口上方添加了新内容，但我会让您自己弄清楚。

于 2013-01-09T21:27:01.413 回答