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

Question

有没有办法可以在网页的开头插入内容，而不会让网页给人以滚动的印象。

我正在尝试实现类似无限滚动的东西，但我需要能够无限向上滚动（我还在另一端卸载内容，以便滚动条不会变得无穷小并且应用程序不会占用太多内存。）

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

有什么想法吗？

Answer 1

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

Answer 2

在我看来，布局是这样的：

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

1. 单击按钮，我要从服务器获取数据，使用该数据动态创建产品卡，然后将此卡添加到.list
2. 问题是，当动态地将卡片添加到DOM时，屏幕会自动滚动，并且我只能看到最后添加的卡片，而没有看到第一次添加的卡片。 我认为它是所有浏览器的默认行为（我可能是错的）-如果在屏幕上是在焦点元素浏览器滚动页面上方的DOM中添加的内容，以便将焦点元素显示在屏幕上。如果没有添加添加到焦点元素下方的内容，则滚动不会发生，并且焦点元素也会出现在屏幕上。
3. 要解决此问题，我只需在向DOM添加卡之前添加document.activeElement.blur()之类的东西，一切都很好。

Answer 3

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

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

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

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

Answer 4

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

var scrollY = window.scrollY;

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

请注意，如果您已经拥有onscroll功能，则需要在此之后重新分配该功能...