Javascript 为什么这个滚动代码在接近div底部时会中断？

我有以下代码：

  componentDidMount() {
    this.screenHeight = window.innerHeight;

    let chatElem = document.querySelector(".conversations-chat");

    window.addEventListener('resize', () => {
      let diff = this.screenHeight - window.innerHeight;

      chatElem.scrollTop += diff;

      this.screenHeight = window.innerHeight;      
    });
  }

其目的是，当虚拟键盘在移动设备上打开时（这会触发调整大小事件），滚动位置会发生变化，这样用户仍然可以看到他们最初看到的最底部的消息

此代码在

对话聊天

足够长且用户可以向上滚动的情况下非常有效。也就是说，打开屏幕上的键盘，然后关闭键盘，将在屏幕底部保留最底部可见的信息

唯一的问题是当接近

对话聊天

底部时关闭虚拟键盘。出于某种莫名其妙的原因，这会导致它从底部滚动到一个固定点（通过观察它，它似乎在虚拟键盘本身的高度附近）

也就是说，如果您当前处于倒数第二条消息，然后打开虚拟键盘，然后关闭它，它将滚动到倒数第十条消息。任何介于第十个到最后一个和最后一个之间的消息都将始终滚动到第十个到最后一个。只有当你通过任意的障碍时，这段代码才会一直有效

因此，我认为需要对像if（diff<0&&nearTheBottom）{scrollMore（）；}这样的东西进行额外的逻辑检查，但我不确定为什么会发生这种情况，甚至不知道如何解释这种情况，或者滚动多少

---

我想，如果我一开始就知道为什么会发生这种事，那么也许我能弄明白。这似乎是一个奇怪的问题，只有在接近底部时才会出现。

注意，通常应该避免对react管理/呈现的元素进行DOM查询。而不是使用<代码>文档.QuestS选择器< /代码>，考虑使用<代码> REF > <代码> ChaleleM>代码>：是的，我知道。这只是演示代码。我可以稍后将其更改为ref。这个问题仍然存在于参考文献中。