保持滚动位置仅在不在消息 div 底部附近时才有效

Question

我正在尝试模仿其他移动聊天应用程序，当您选择send-message文本框并打开虚拟键盘时，最底部的消息仍在视图中。似乎没有办法用 CSS 惊人地做到这一点，所以 JavaScript resize（唯一的方法是找出键盘何时明显打开和关闭）事件和手动滚动来救援。

有人提供了这个解决方案，我发现了这个解决方案，它们似乎都有效。

除了一种情况。出于某种原因，如果您MOBILE_KEYBOARD_HEIGHT在消息 div 底部的（在我的情况下为 250 像素）像素内，当您关闭移动键盘时，会发生一些奇怪的事情。使用前一种解决方案，它会滚动到底部。使用后一种解决方案，它会MOBILE_KEYBOARD_HEIGHT从底部向上滚动像素。

如果你滚动到这个高度以上，上面提供的两种解决方案都可以完美地工作。只有当你接近底部时，他们才会有这个小问题。

我想也许这只是我的程序导致了一些奇怪的杂散代码，但不，我什至复制了一个小提琴，它有这个确切的问题。我很抱歉让调试变得如此困难，但是如果您在手机上访问https://jsfiddle.net/t596hy8d/6/show（show后缀提供全屏模式），您应该能够看到相同的行为。

这种行为是，如果您向上滚动足够多，则打开和关闭键盘会保持该位置。但是，如果您在底部的像素内关闭键盘MOBILE_KEYBOARD_HEIGHT，您会发现它会滚动到底部。

这是什么原因造成的？

代码复制在这里：

window.onload = function(e){ 
  document.querySelector(".messages").scrollTop = 10000;
  
  bottomScroller(document.querySelector(".messages"));
}
  

function bottomScroller(scroller) {
  let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;

  scroller.addEventListener('scroll', () => { 
  scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
  });   

  window.addEventListener('resize', () => { 
  scroller.scrollTop = scroller.scrollHeight - scrollBottom - scroller.clientHeight;

  scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
  });
}

.container {
  width: 400px;
  height: 87vh;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  overflow-y: auto;
  height: 100%;
}

.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="messages">
  <div class="message">hello 1</div>
  <div class="message">hello 2</div>
  <div class="message">hello 3</div>
  <div class="message">hello 4</div>
  <div class="message">hello 5</div>
  <div class="message">hello 6 </div>
  <div class="message">hello 7</div>
  <div class="message">hello 8</div>
  <div class="message">hello 9</div>
  <div class="message">hello 10</div>
  <div class="message">hello 11</div>
  <div class="message">hello 12</div>
  <div class="message">hello 13</div>
  <div class="message">hello 14</div>
  <div class="message">hello 15</div>
  <div class="message">hello 16</div>
  <div class="message">hello 17</div>
  <div class="message">hello 18</div>
  <div class="message">hello 19</div>
  <div class="message">hello 20</div>
  <div class="message">hello 21</div>
  <div class="message">hello 22</div>
  <div class="message">hello 23</div>
  <div class="message">hello 24</div>
  <div class="message">hello 25</div>
  <div class="message">hello 26</div>
  <div class="message">hello 27</div>
  <div class="message">hello 28</div>
  <div class="message">hello 29</div>
  <div class="message">hello 30</div>
  <div class="message">hello 31</div>
  <div class="message">hello 32</div>
  <div class="message">hello 33</div>
  <div class="message">hello 34</div>
  <div class="message">hello 35</div>
  <div class="message">hello 36</div>
  <div class="message">hello 37</div>
  <div class="message">hello 38</div>
  <div class="message">hello 39</div>
  </div>
  <div class="send-message">
	<input />
  </div>
</div>

Answer 1

我终于找到了一个真正有效的解决方案。尽管它可能并不理想，但它实际上适用于所有情况。这是代码：

bottomScroller(document.querySelector(".messages"));

bottomScroller = scroller => {
  let pxFromBottom = 0;

  let calcPxFromBottom = () => pxFromBottom = scroller.scrollHeight - (scroller.scrollTop + scroller.clientHeight);

  setInterval(calcPxFromBottom, 500);

  window.addEventListener('resize', () => { 
    scroller.scrollTop = scroller.scrollHeight - pxFromBottom - scroller.clientHeight;
  });
}

我一路走来的一些顿悟：

1. 当关闭虚拟键盘时，scroll在该事件之前立即发生一个事件resize。这似乎只发生在关闭键盘时，而不是打开键盘时。这scroll就是你不能使用事件来设置 的原因pxFromBottom，因为如果你接近底部，它会在事件scroll之前的事件中将自己设置为 0 resize，从而扰乱计算。

2. 所有解决方案在消息 div 底部附近都遇到困难的另一个原因有点难以理解。例如，在我的调整大小解决方案scrollTop中，我只需在打开或关闭虚拟键盘时添加或减去 250（移动键盘高度） 。除了靠近底部之外，这一切都完美。为什么？因为假设您距底部 50 像素并关闭键盘。scrollTop它会从（键盘高度）减去 250 ，但它应该只减去 50！因此，当靠近底部关闭键盘时，它总是会重置到错误的固定位置。

3. 我还相信您不能使用此解决方案的onFocus和onBlur事件，因为这些事件仅在最初选择文本框打开键盘时发生。您完全可以在不激活这些事件的情况下打开和关闭移动键盘，因此无法在此处使用它们。

我认为上述几点对于开发解决方案很重要，因为它们一开始并不明显，但却阻碍了稳健解决方案的开发。

我不喜欢这个解决方案（间隔有点低效并且容易出现竞争条件），但我找不到任何更好的始终有效的解决方案。