scrollTop在iOS Safari中的行为恰恰相反

Question

在其他设备/浏览器中，滚动到顶部并单击Get Current Position按钮后，将返回scrollTop值0。但是在iOS上，它返回负数。类似地，其他设备上的scrollTop = 0滚动到顶部，但在iOS上滚动到底部。谁能解释一下？

模板：

    <section id="chat-messages" class="chat-messages">
      <div class="message sent">
        <p>e</p> <span>1:34pm</span></div>
      <div class="message sent">
        <p>a</p> <span>1:34pm</span></div>
      <div class="message sent">
        <p>a</p> <span>1:18pm</span></div>
      <div class="message received">
        <p>123123</p><span>12:34pm</span></div>
      <div class="message received">
        <p>wad up</p> <span>11:23pm</span></div>
      <div class="message received">
        <p>R</p> <span>10:17pm</span></div>
    </section>
    <section>
      <input type="text" id="text">
      <button id="getCurrentPos">Get Current Position</button>
      <button id="gotoInputPos">Goto input position</button>
    </section>

CSS：

.chat-messages {
  flex-grow: 1;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 0;
  padding: 20px 10px 20px 10px;
  height: 50vh;
}

Javascript：

let chatMessages = document.getElementById('chat-messages')
let text = document.getElementById('text')
let getCurrentPosition = document.getElementById('getCurrentPos')
let gotoInputPosition = document.getElementById('gotoInputPos')

getCurrentPosition.addEventListener('click', () => {
  text.value = chatMessages.scrollTop
})

gotoInputPosition.addEventListener('click', () => {
  chatMessages.scrollTop = text.value
})

Codepen演示：https://codepen.io/coderpradp/full/WNNgarP