全屏移动模式。这能有多难？

想象一下，你需要实现一个移动端友好的表单，除了传统的输入框之外，你还需要实现全屏无限循环日历和全屏下拉框。我们来聊聊“全屏”吧。你觉得这有多难？应该不难——只要用一个带有 z-index 和固定定位的全屏 div 就行了。对吧？我也是这么想的。

尝试次数 1

让我们使用div能够覆盖整个屏幕的选项

.FullScreenOne {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  background: #fff;
}

它能正常工作，但用户可以Tab（⌃在⌄iOS 中可以使用）将光标移出模态框。

使用ReachDialog（作为之前解决方案的补充）。Dialog这将对aria-hidden根节点上document.body除当前活动对话框之外的所有节点进行设置。这样可以将虚拟光标限制在对话框内。

~~附注：我尝试了react-focus-lock，但它在 iOS 中不起作用（我是指对于⌃和⌄）。~~

除了用户想要滚动模态框的内容时，其他情况下都能正常工作，但用户滚动到模态框后面的内容时，却会出现问题。

ScrollLocky（除了之前的解决方案之外）使用此方法ScrollLocky可以阻止与页面其余部分的任何交互，方法是借助body 元素上的 `<body>` 标签react-locky。position: relative

除了用户向下滚动时移动版 Safari 的底部边框被隐藏之外，其他情况下都能正常工作；但之后可以通过某种方式触发底部边框的显示，导致部分模态框被隐藏。

（在之前解决方案的基础上）使用此方法mobile-safari-fullscreen。它会在模态框打开时始终强制显示浏览器底部边框。

附注：WindowSize也可以使用其他方法mobile-safari-fullscreen。我认为这是更优的解决方案，这个演示更多是为了展示可能出现的极端情况。

<WindowSize>
  {({ height }) => (
    <ul style={{ height }}>
      <li />
    </ul>
  )}
</WindowSize>

正是这些小细节让前端开发既充满挑战又趣味十足。如果你喜欢这篇文章，不妨看看我关于网页图片用户体验的文章。

PS： 不同浏览器的焦点处理方式有所不同。最明显的是移动版 Safari，它不允许将焦点放在链接和按钮上¯\_(ツ)_/¯。

请查看此 GitHub 仓库以获取本文的完整代码。