在不更改可见滚动内容的情况下插入元素的顶部[关闭]

Question

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

[<16小时前关闭。

我正在建立网站的聊天界面。第一次加载时，与大多数聊天应用程序一样，显示最新的消息，在底部显示最新消息。

随着用户向上滚动，更多的消息将通过我们的API加载，并插入到现有消息的上方。

如您所料，聊天气泡在具有<div>和设定高度的容器<div>内以overflow-y: auto样式设置。

目前，我正在注意顶部的消息<div>，在其上方加载较旧的消息，然后重新定位视图以尝试将用户放回到他们离开的地方，但这很棘手，尤其是当聊天气泡包含动态加载的元素（嵌入式图像等）。 （我不知道这些气泡在浏览器呈现之前的高度。）

在理想的世界中，我想找到一种在上面插入消息的方法，而不会导致滚动位置完全移动，从而使用户不会失去对它们在消息流中的位置的跟踪。

我从没听说过这样的事情，但是如果有一种方法可以告诉div向上伸展，而不是使div将现有消息进一步向下推，那将很酷。

任何建议都将不胜感激。

Answer 1

幸运的是，有。 CSS属性称为overflow-anchor。将元素的overflow-anchor属性设置为overflow-anchor时，它将打开auto；否则，将打开scroll anchoring。这是浏览器试图最大程度地减少内容跳动的问题（例如，滚动位置上方加载的大图像会导致内容进一步向下滚动）；

和调整滚动位置时，将所述元素设置为潜在锚点。

这是一个简单的演示。首先，window已经滚动了200px。每两秒钟，将新的div插入到容器的顶部。请注意，即使在容器顶部插入了新的window，div的可见区域也不会改变。

const container = document.querySelector('#container')

window.scrollBy(0, 200)

let counter = 9
setInterval(() => {
  let newDiv = document.createElement('div')
  newDiv.classList.add('messages')
  newDiv.innerText = counter++;
  container.prepend(newDiv)
}, 2000)

* {
  box-sizing: border-box;
  font-family: Helvetica;
}

html,
body {
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  scroll-behavior: smooth;
  overflow-anchor: auto;
}

.messages {
  width: 100%;
  padding: 20px;
  text-align: center;
  background: #121212;
  color: white;
  border-radius: 5px;
  margin: 20px 0px;
}

<div id="container">
  <div class="messages">8</div>
  <div class="messages">7</div>
  <div class="messages">6</div>
  <div class="messages">5</div>
  <div class="messages">4</div>
  <div class="messages">3</div>
  <div class="messages">2</div>
  <div class="messages">1</div>
</div>