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

Question

我有这个代码：

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

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

此代码在conversations-chat足够长且用户向上滚动的情况下完美运行。也就是说，打开屏幕键盘然后关闭它会将最底部的可见消息保留在屏幕底部。

唯一的问题是在接近底部时关闭虚拟键盘conversations-chat。由于某种莫名其妙的原因，这导致它从底部滚动到一个固定点（从目测来看，它似乎在虚拟键盘本身的高度附近）

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

所以我想需要对类似的东西进行额外的逻辑检查if (diff < 0 && nearTheBottom) { scrollMore(); }，但我不确定为什么会发生这种情况，甚至不确定如何解释或者滚动多少。

我想如果我一开始就知道为什么会发生这种情况，那么也许我可以弄清楚。这似乎是一个奇怪的问题，只有在接近底部时才会发生。

标签： javascripthtmlcssreactjsscroll