将内容插入页面顶部而不滚动

有没有一种方法可以将内容插入网页的开头，而不会导致页面产生向上滚动的印象。将内容插入页面顶部而不滚动

我试图实现某种类似无限滚动，但我需要能够向上滚动无限以及向下（我也卸载另一端的内容，使滚动条不成为无限小，应用程序不占用太多的内存）。

我很高兴使用JavaScript，我宁愿不使用库（我试图保持较轻的重量）。

任何想法？

2011-12-12 jcuenod

Google+已经这么做了。只需尝试在其Feed中向下滚动https://plus.google.com/s/a等热门搜索。无需更改滚动位置即可将新项目无缝添加到页面的顶部。看起来他们正在使用虚假滚动条，固定位置和偏移量的组合，尽管我还没有时间对页面上的大量容器进行排序以确认它们是如何完成的。 –

一个可能的想法是完全绕过滚动机制，并做你自己的。

基本上，用display: fixed来定位每个元素。然后您可以使用负位置在屏幕上方加载元素。

您必须同步文档的高度（只需添加空白），以便文档滚动条正确。然后，您将捕获滚动事件并调整页面内所有元素的固定位置。

我不确定它会有多光滑，但我相当肯定你可以得到你正在寻找的效果。

2011-12-12 16:35:27

我一直在想这样的事情，我只是希望会有一些神秘的document.prepend或其他东西... – jcuenod

是啊，我不知道的。任何时候你有浏览器为你做布局，在DOM中插入元素会混乱你的滚动位置，你会遇到重绘问题。也许这就是为什么没有人做负面无限滚动？ :) –

@ j3frea - 我刚刚注意到，Facebook实际上是在查看一条长消息线程并向上滚动时实现这一点。并且滚动位置没有跳跃或晃动。我想你可以尝试反向工程他们是如何做到的:) –

您可以使用window.scrollBy(x, y)在添加内容时向下滚动（您必须计算添加内容的高度）。

2011-12-12 16:06:35 Viruzzo

问题是，这实际上涉及滚动两次，然后因为内容向下移动然后移回。我正在寻找（最好）不需要重绘的东西 – jcuenod

执行代码来创建你的元素之前，简单地做这样的事情：

var scrollY = window.scrollY; 

window.onscroll = function(){ 
    window.scrollTo(0, scrollY); 
    window.onscroll = null; 
};

请记住，如果你已经有了一个onscroll功能，则需要在此之后重新分配功能.. 。

2017-12-02 23:37:18

回答