保持页面的位置，同时页面长度变化

的页面是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>

来源

2013-01-09 Kevin Burke

如何开始工作小提琴，所以我们不必自己设置整个东西？ :) –

在正在查看的内容下添加新内容。 – kennebec

在这种情况下不是一个选项... –

看看这个小提琴： 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-09 21:27:01 InvisibleBacon

有趣，我会试试看！ –

（我知道我没有问过上面的问题，但是我遇到的实际问题涉及多个HTTP请求，我认为如果将它简化为1就可以了，可悲的是这种方法导致页面滚动太多。 –

请注意，此答案适用于在当前滚动位置上方加载的内容，但不在下方。如果动态内容低于视口，则滚动位置不应更改。此答案仍然会将差异添加到当前滚动位置。 –

延迟显示新内容

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

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

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

使内容可折叠

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

来源

2013-01-09 23:00:27

保持页面的位置，同时页面长度变化

回答

相关问题