Как поменять Направление скрола на Css

В данный момент работаю над окном чата, и сделал так чтобы окно которое overflow: scroll отображало элементы снизу в верх с лева на право

.chat {
  height: 300px;
  background-color: #f2f2f2;
  overflow: scroll;
  transform: rotateX(180deg);
}

.tree {
  transform: rotateX(180deg);
}

<div class="chat">
  <div class="chat_content">
    <tree v-for="item in posts" :tree-data="item"></tree>
  </div>
</div>

Это работает, но появилась проблема с поведением колеса мыши или трекпада, я хотел бы изменить направление прокрутки, например если я кручу вверх то содержимое окна должно перемещаться вверх