如何允许用户使用css快照向上滚动

Question

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

但是，如果我想向上滚动，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;
}

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