如何在移动 Safari 中打开虚拟键盘时将视口固定到位？

Question

目标

在移动版 Safari 上，当虚拟键盘打开时，屏幕应呈现如下图像：

在哪里：

• 导航栏和输入固定到位
• 短信列表可滚动

问题

在移动版 Safari 上，当软键盘打开时，在输入或导航栏上拖动可以上下移动整个视口。

我有一个屏幕截图视频演示了这个问题：https : //youtu.be/GStBjRVpoGU

我已经在这个问题上花了几个月的时间，包括在 Stack Overflow 上浏览了许多类似的问题，但我一直无法找到一个有效的解决方案（或者，至少，一个我能够解决的问题）。

背景

此应用程序是一个混合移动应用程序：使用 React.js 构建为 Web 应用程序，但使用 WebView 组件封装在 React Native 应用程序中。然而，即使在普通的移动 Safari 窗口中打开 Web 应用程序，也存在同样的问题。

Mobile Safari 有一个相关问题，软键盘在打开时会将整个视口向上推，从而使视口的上半部分向上推离屏幕。这个优秀的博客提供了该问题的描述和解决方案。我实施了该解决方案。它在软键盘打开时阻止了视口向上移动，但在软键盘打开后视口仍然可以滑动。

另一个问题是，window.innerHeight当软键盘打开/关闭时，移动版 Safari 不会更新。为了解决这个问题，我react-native-keyboard-spacer在 React Native 应用程序中使用了如下方式：

render() {
    return (
      <React.Fragment>
        <SafeAreaView >
          <WebView/>
        </SafeAreaView>
        <KeyboardSpacer />
      </React.Fragment>
    );
  }

每当软键盘打开/关闭时，这都会改变 Webview 的高度，因此window.innerHeight等也会发生变化。

众所周知，position: fixed;当软键盘打开时，移动 Safari 无法正常工作，所以我position: absolute;改用了，这要感谢另一个非常有用的博客 中的建议。

我创建了一个代码沙箱来演示这个问题。在移动版Safari中打开，可以看到虚拟键盘打开后的屏幕滑动。你也可以在这里查看实际的代码沙箱代码，它代表了我最接近解决这个问题的方法。

不过，关于代码沙箱需要注意的一件事。没有 WebView 或 KeyboardSpacer：它只是一个网页。因此，我不得不硬编码一些高度。但是如果你在移动版 Safari 中打开它，你会看到一旦软键盘打开，视口就会在整个地方滑动。

有没有人见过这个特定的问题？你怎么修好它的？提前谢谢了。

Answer 1

在JMathew的帮助下，我找到了解决此问题的方法。

请参阅此处的有效代码和框示例。

1. 将您的导航栏、消息列表和输入放入容器 div。
2. 将引用添加到这些容器 div。例如：

  const messageListContainerRef = useRef<HTMLDivElement>(null);

  //...

  return (
    //...
    <div ref={messageListContainerRef}>
      <MessageList/>
    </div>
    //...
  )

3. 当虚拟键盘打开时（当虚拟输入被聚焦时），将 touchmove 事件的事件侦听器添加到inputContainerRef和navbarContainerRef。preventDefault()在触摸移动事件上使用它，这将阻止用户能够上下滑动输入和导航栏。例如：

if (inputContainerRef.current) {
  inputContainerRef.current.addEventListener('touchmove', (e) => {
    e.preventDefault();
  });
}

4. 您仍然希望能够滚动浏览消息列表，因此您不能仅仅停留preventDefault()在它上面。相反，使用此解决方案通过设置scrollTop值来防止用户滚动页面底部（和顶部）：

if (messageListContainerRef.current) {
  messageListContainerRef.current.addEventListener('touchmove', (e: any) => {
    if (!e.currentTarget) {
      return;
    }
    if (e.currentTarget.scrollTop === 0) {
      e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop +
                                                e.currentTarget.offsetHeight) {
      e.currentTarget.scrollTop -= 1;
    }
  });
}

根据您的需要/需要，您可以touchmove在组件安装上设置这些事件侦听器，而不是在输入焦点上。如果这对您有用，您甚至可以为整个 document.body 设置它们。