相关疑难解决方法(0)

我正在尝试模仿其他移动聊天应用程序，当您选择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; …