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

有没有一种方法可以让我在网页的开头插入内容，而不会让页面产生向上滚动的感觉

我试图实现类似无限滚动的功能，但我需要能够无限向上滚动和向下滚动（我还在另一端卸载内容，这样滚动条就不会变得无限小，应用程序也不会占用太多内存）

我很乐意使用javascript，我不想使用库（我正在努力保持更轻的重量）

---

有什么想法吗？

你可以使用

窗口。scrollBy（x，y）

在你添加内容时向下滚动（你必须计算你添加内容的高度）。

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

基本上，用

display:fixed

定位每个元素。然后可以使用负数位置在屏幕上方加载元素

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

---

我不确定它会有多平滑，但我相当确定您可以获得想要的效果。

在执行代码创建元素之前，只需执行以下操作：

var scrollY = window.scrollY;

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

<div class='container'>
   <div class='list'>
      product cards...
   </div>
   <button>Load more</button>
</div>

---

请记住，如果您已经有一个

onscroll

函数，那么在此之后您需要重新分配该函数…

在我的例子中，布局是这样的：

var scrollY = window.scrollY;

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

<div class='container'>
   <div class='list'>
      product cards...
   </div>
   <button>Load more</button>
</div>

产品卡片。。。
加载更多

通过单击按钮，我希望从服务器获取数据，使用该数据动态创建产品卡，并将该卡添加到.list

问题是，当动态地将卡片添加到DOM中时，屏幕会自动滚动，我只看到最后添加的卡片，而不是第一次添加的。 我认为它的默认行为适用于所有浏览器（我可能错了）——如果在DOM中添加的内容位于聚焦元素浏览器滚动页面之上，以便聚焦元素出现在屏幕上。如果在聚焦元素下方添加的内容未发生滚动，则聚焦元素也将显示在屏幕上

为了解决这个问题，我只需在向DOM添加卡片之前添加类似于

document.activeElement.blur（）的内容，一切都很好

---

问题是，这实际上需要滚动两次，因为内容先向下移动，然后再向后移动。我正在寻找一些（最好）不需要重画的东西。我一直在想这样的东西，我只是希望会有一些神秘的文件。prepend或其他东西…是的，我不知道。每当你让浏览器为你做布局的时候，在DOM中插入元素会弄乱你的滚动位置，你会遇到重新绘制的问题。也许这就是为什么没有人做负无限卷轴的原因@j3frea-我刚刚注意到，当你看到一条长消息并向上滚动到顶部时，Facebook实际上实现了这一点。。滚动位置没有跳跃或抖动。我想你可以尝试反向工程他们是如何做到的：）Google+已经做到了。只要试着在一个流行的搜索上向下滚动，就像在他们的提要中一样。新项目将无缝添加到页面顶部，而无需更改滚动位置。看起来他们使用的是假滚动条、固定位置和偏移量的组合，尽管我还没有时间对页面上的大量容器进行排序，以确认他们是如何完成的。