在 Chrome / Firefox 移动浏览器中，粘性 HTML 元素隐藏在移动导航栏下方。如何解决这个问题？[ 更新 ]

Question

要求 ：

• 我有一个带有名为 的按钮的操作栏Next Scale，该按钮位于position: sticky移动bottom: 0视图中。
• 我希望这个 HTML 元素在我们滚动时粘在视口的底部，并在离开视图时保持在底部。

问题 ：

• 在下面给定的 GIF 图像中，操作栏和Next scale按钮隐藏在移动导航窗格下方，而相同的粘性功能要求在桌面中按预期工作。

• 如果我滚动到页面末尾并滚动回上方，操作栏将按预期工作并保持在导航窗格上方。但当我到达顶部时，它又被隐藏了。

问题 ：

• 如何确保粘性元素的bottom计算从移动导航窗格上方开始，以便该元素始终可见？
• 如果这是移动设备的默认行为，那么如何解决这个问题？

CODEPEN 链接：（请在手机中打开“全页查看链接”以重现问题）

STICKY html 问题 codepen 链接（完整页面视图）

演示高清 YouTube 链接：

YouTube 视频链接

演示：

更新（8/7/22）：

• 发现这个问题是由于dynamic viewport height移动浏览器的变化造成的（参考： https: //stackoverflow.com/a/72245072/4894872）。
• 以及我在代码中使用的布局样式。布局组件样式如下：

.layout {
    display: block;
    position: relative;
    height: 100vh;
    width: 100vw;
    min-height: 100%;
    overflow-x: hidden;
}

• 基于 CANIUSE，新的视口单元选项，如dvh、lvh、svh目前仅适用于 Firefox 和 Safari。（在撰写本更新时。（参考：https: //caniuse.com/viewport-unit-variants，FIREFOX演示： https: //youtube.com/shorts/y-q2V3Ps0VQ ?feature=share，CHROME 演示：https://youtube.com/shorts/V2gkdwtbDh8?feature=share）

• 原始代码的最接近的重建可以在这个 codepen 中找到（注意：请在 Chrome / firefox / edge 等移动浏览器中打开）-> https://codepen.io/sparkeplug/pen/WNzwerE（在调试模式下查看）。

• 手机版 CODEPEN 演示视频：https://youtube.com/shorts/wTrPIruyERs?feature=share

• 在上面的 codepen 演示中， css 中safe-area-inset使用的值env()并不能解决问题。

• 移动设备视频中原始问题的回顾：https://youtube.com/shorts/lIEfHgYkSjQ ?feature=share

问题更新：

• 如何bottom: 0在不使用新视口单元的情况下修复粘性元素，使其不会因动态视口高度变化而被设备导航栏遮挡dvh？

Answer 1

作为解决方法，设置最顶部的布局组件位置可以fixed解决该问题。

.layout {
    display: block;
    position: fixed;
    height: 100vh;
    width: 100vw;
    max-height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-x: hidden;
}

工作代码笔（在移动浏览器中打开 - 调试模式）：

https://codepen.io/sparkeplug/pen/WNzwerE