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