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

Question

有没有一种方法可以让我在网页的开头插入内容而不会使页面给人向上滚动的印象。

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

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

有什么想法吗？

Answer 1

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

var scrollY = window.scrollY;

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

请记住，如果您已经有一个 onscroll 函数，则在此之后您将需要重新分配该函数...

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

您可以将物品放在反向容器的底部，而不是将它们放在容器的顶部。结果在视觉上是相同的。

为了实现这一点，您可以定义一个反向列弹性框，然后将项目附加到其底部（视觉上位于顶部）。

这是一个示例（在此处以 jsfiddle 形式提供： https://jsfiddle.net/u91cd38e/1/ ）

const el = document.querySelector(".container");
let i = 3;

setInterval(() => el.innerHTML += `<div> Item ${i++} </div>`, 500);

.container {
  display: flex;
  flex-direction: column-reverse;
  height: 200px;
  width: 200px;
  overflow-y: auto;
}

.container div {
  flex-shrink: 0;
  height: 100px;
}

<div class="container">
   <div> Item 1 </div>
   <div> Item 2 </div>
   <div> Item 3 </div>
</div>

Answer 4

一种可能的想法是完全绕过滚动机制并自行完成。

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

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

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

Answer 5

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

Answer 6

我通过将容器的第一个元素保存在变量中解决了这个问题，然后在插入后调用“scrollIntoView”。对我来说看起来很光滑。