修复移动端position:sticky底部元素被导航栏遮挡问题

• 操作栏搭载Next Scale按钮，移动端视图下已为该操作栏设置position: sticky与bottom: 0样式
• 要求该元素在页面滚动时始终吸附在视口底部，即使滚动过程中移出常规定位范围，也要保持固定在视口底部位置

• 操作栏与Next scale按钮会被移动端浏览器内置导航栏遮挡，完全相同的sticky吸附逻辑在桌面端运行正常
• 页面滚动到底部再向上回滚时，操作栏可正常吸附在导航栏上方显示，但滚动回页面顶部时会再次被遮挡

• 如何让sticky元素的bottom值计算起点落在移动端导航栏上方，保证元素始终可见？
• 若该现象属于移动端默认行为，应采用什么方案适配解决？

• 已定位问题根源：该问题由移动端浏览器的dynamic viewport height（动态视口高度）变化机制导致
• 问题与布局容器的样式设置直接相关，涉事布局代码如下：

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

• 对照CANIUSE兼容性数据，排查节点下新型视口单位dvh、lvh、svh仅完成Firefox与Safari端适配
• 已产出最小复现Demo，在Chrome/Firefox/Edge移动端打开DEBUG模式即可复现问题
• 实测验证：通过CSS env() 方法获取safe-area-inset安全区数值的方案无法修复该问题

• 不使用新型视口单位dvh的前提下，如何修复动态视口高度变化导致的、设置bottom: 0的sticky元素被设备导航栏遮挡的问题？

内容的提问来源于stack exchange，提问作者Neyo