嘿开发者！我在开发我的笔记应用程序时发现了这一点。
这是使用我的应用程序的帖子。
在 X (Twitter) 上分享进展
您是否曾经因为 CSS 没有按照您预期的方式工作而感到惊讶？
当我将一个元素设置为固定在底部，然后在我的 iPhone 上打开键盘时，这种情况再次发生在我身上。
我所看到的是该元素根本不可见。
因为它是固定的。到底部。键盘后面
似乎要修复这个问题，我们需要一些 JS。
有一个具有良好支持的浏览器 API 可用于这些目的：VisualViewport。
它返回实际可见视口的宽度和高度。 MDN 文档链接。
但是，请自行调查，看看您的目标版本是否支持它。
基本上，我们需要处理元素相对于视觉视口的位置，以及滚动位置和元素的高度。我们来算算吧。
此外，由于这种方式的数学要简单得多，因此使用顶部参数而不是底部参数是有意义的。
我将使用 React。对于任何其他框架，您只需复制 useEffect hook 的内容即可。
我还需要添加一些动画并隐藏滚动上的块，但你不必这样做，它总是可见的。
以上是即使键盘打开，如何保持元素固定在底部的详细内容。更多信息请关注PHP中文网其他相关文章！
