Как разрешить пользователю прокручивать вверх с помощью css snap?

Question

У меня есть чат, который может содержать много сообщений. Каждый раз, когда отправляется новое сообщение, div прокручивается вниз благодаря свойству css snap.

Однако, если я хочу прокрутить вверх, div автоматически go вернется вниз. Как разрешить постоянную прокрутку вверх и go назад вниз, только если в список добавлено новое сообщение?

Вот пример кода:

.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;
}

И добавить 'snap-code' к событию, отправляющему текст.