揭开谜题：position: fixed 虚拟按键触发后无效的症结与解方
2023-07-04 11:14:51
虚拟按键的魔杖：揭开其对固定定位的失常影响
虚拟按键，这根无形的魔杖，在触发的那一刻，竟能改变固定定位（position: fixed）控件的旋律，扰乱其原本的节拍，这其中的奥秘值得我们深入探究。
失常的根源：容器高度的变奏
要理解虚拟按键的魔法，我们需要深入其背后的机制。当虚拟按键触发时，它会改变可视区域的尺寸，随之而来的是容器高度的变动。而固定定位的特性正是依赖于容器的高度。一旦容器的高度随着虚拟按键的触发而变化，固定定位赖以生存的基础就会不稳定，进而失效。
化解难题的锦囊：巧妙的应对措施
面对虚拟按键触发的难题，我们并非束手无策，而是可以采取多种巧妙的措施：
- 虚拟按键隐身术：消弭干扰
让虚拟按键彻底隐藏，就像按下了一键静音，消除了它对固定定位的干扰。
- 凌空之花：悬浮其上
让固定定位控件始终处于虚拟按键之上，就像一朵傲立的高岭之花，不为外界干扰所撼动。
- 相安无事：分离呈现
让虚拟按键以与固定定位控件相分离的方式呈现，互不侵犯，互不干涉。
- 动态感知：灵敏响应
以灵敏的感知机制，随时把握虚拟按键的出没动态，并即时调整控件的位置和大小，让虚拟按键的来去不惊扰固定定位的安宁。
通用之道：移动端容器的“窗口化”
面对虚拟按键触发的难题，我们还期冀一个更加普适之道，一个能让我们在应对各种场景时都游刃有余。
让我们把目光转向移动端和 PC端的差异：
在 PC端，当虚拟按键触发时，窗口的高度会随之上升，而固定定位控件则会悬停在窗口的顶部，保持相对的稳定。
而在移动端，当虚拟按键触发时，浏览器的容器的高度会随之上升，而固定定位控件却错失了保持相对稳定的机会，反被顶起。
造成此差异的原因，是移动端没有如 PC端般的窗口概念，而是采用了滚动容器的概念，而固定定位控件相较之下，更依赖于容器。
既然找到了问题的关键，那解决方案也就水到渠成：将移动端浏览器的容器视为一个窗口，即可援引 PC端的固定定位解决方案。
跨越局限：多元赋能
领略过虚拟按键触发时，固定定位的失常表现，再熟悉其背后的成因，及针对性的应对措施，相信您已能沉稳应对难题的考验。
然而，世界的变幻莫测，技术的推陈出新，让我们难以固步自封。唯有持续关注，孜孜不倦，才能不断充实自身，迎接未知的挑战。
在我们脚下的移动开发之路上，尚有许多值得探索的领域，期待我们携手并肩，披荆斩棘，拓展更加广阔的技术视野。
常见问题解答
- 为什么虚拟按键会影响固定定位控件？
虚拟按键会改变可视区域的尺寸，进而导致容器高度的变动，而固定定位依赖于容器的高度，容器高度变化会导致固定定位失效。
- 有什么办法可以解决虚拟按键对固定定位的影响？
可以通过隐藏虚拟按键、让固定定位控件悬浮在虚拟按键之上、让虚拟按键与固定定位控件分离呈现、动态感知虚拟按键并调整控件位置和大小等方法来解决。
- 移动端和 PC端在虚拟按键触发时的固定定位表现有何差异？
PC端固定定位控件会悬停在窗口顶部，保持稳定，而移动端固定定位控件会被顶起。
- 为什么移动端固定定位控件会被顶起？
因为移动端没有窗口概念，而是采用滚动容器的概念，固定定位控件依赖于容器，容器高度变化导致控件被顶起。
- 如何让移动端固定定位控件像 PC端一样悬停在窗口顶部？
可以将移动端浏览器的容器视为一个窗口，并使用 PC端的固定定位解决方案。
代码示例
/* 隐藏虚拟按键 */
body {
height: 100vh;
overflow: hidden;
}
/* 悬浮在虚拟按键之上 */
.fixed-above-keyboard {
position: fixed;
bottom: calc(100vh - 44px);
}
/* 与虚拟按键分离呈现 */
.fixed-separate-keyboard {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: calc(100vh - 44px);
}
/* 动态感知虚拟按键 */
window.addEventListener('resize', function() {
// 调整固定定位控件的位置和大小
});
/* 移动端容器“窗口化” */
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
