css - 如何允许用户使用 css snap 向上滚动？

Question

我有一个可以包含很多消息的聊天框。每次发送新消息时，由于 css snap 属性，div 会向上滚动到底部。

但是，如果我想向上滚动，div 会自动回到底部。如何允许持续向上滚动，并且只有在将新消息添加到列表时才返回底部？

这是一个代码想法：

.container{
  max-height: 100px;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y proximity;
}

textarea{
    scroll-snap-align: start;
}

<div class="container">
  <div>message 1</div>
   <div>message 2</div>
   <div>message 3</div>
   <div>message 4</div>
   <div>message 5</div>
   <div>message 6</div>
   <div>message 7</div>
   <div>message 8</div>
   <div>message 9</div>
   <div>message 10</div>
  <textarea placeholder="write message"></textarea>
</div>

谢谢！

Answer 1

您应该删除：

textarea{
scroll-snap-align: start;
}

并将“快照代码”添加到提交文本的事件中。