移动端EditorJS编辑器工具栏固定在虚拟键盘上方的实现难题

问题背景 #

用EditorJS开发编辑器时，PC端已经实现了顶部粘性（position: sticky）工具栏，但移动端受虚拟键盘弹出影响，sticky定位完全失效。我打算针对移动端把工具栏改成position: fixed; bottom: 0，通过resize和scroll事件计算它的正确位置，但核心步骤卡壳了：防抖处理后，始终捕获不到resize前后的visualViewport.height差值，导致位置计算完全失效。

当前代码里，控制台打印的resize开始和结束时的视口高度完全一致，根本没法算出变化量。

问题原因 #

1. 时机不对：resize事件触发时，visualViewport.height已经完成了变化，此时记录的“开始值”其实是变化后的高度，不是键盘弹出前的初始值。
2. 防抖逻辑有漏洞：没有提前缓存虚拟键盘弹出前的基准视口高度，每次resize触发时直接读当前值，自然拿不到前后差值。

解决方案 #

1. 提前缓存初始视口高度 #

在编辑器初始化时，先保存好初始的可视视口高度，后续用这个值和resize结束后的高度做对比，就能算出键盘弹出导致的高度变化。

2. 监听visualViewport的resize事件（优先于window） #

移动端虚拟键盘弹出时，visualViewport的resize事件比window的resize更精准，能直接反映实际可视区域的变化，避免被浏览器导航栏显示/隐藏干扰。

3. 修正防抖逻辑 #

确保只在合适的时机记录基准值，防抖结束后计算差值并更新工具栏位置。

修正后的代码示例：

let initialViewportHeight;
let mobileResizeDebounceTimerId = null;
const toolbarElement = document.querySelector('.editor-toolbar');

// 初始化缓存初始视口高度
document.addEventListener('DOMContentLoaded', () => {
  initialViewportHeight = window.visualViewport?.height || window.innerHeight;
});

function handleIOSKeyboardAppear() {
  // 防抖：每次resize触发时清除之前的定时器
  if (mobileResizeDebounceTimerId) {
    clearTimeout(mobileResizeDebounceTimerId);
  }

  mobileResizeDebounceTimerId = setTimeout(() => {
    const currentViewportHeight = window.visualViewport?.height || window.innerHeight;
    // 计算视口高度变化差值（即键盘高度或浏览器栏变化高度）
    const heightDiff = initialViewportHeight - currentViewportHeight;
    
    // 更新工具栏bottom值：差值为正说明键盘弹出，设置bottom为差值；否则重置为0
    toolbarElement.style.bottom = heightDiff > 0 ? `${heightDiff}px` : '0px';
    
    // 更新基准高度，适配后续的resize（比如键盘收起后再弹出）
    initialViewportHeight = currentViewportHeight;
  }, 300);
}

// 绑定事件监听
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  window.visualViewport?.addEventListener('resize', handleIOSKeyboardAppear);
  // 兼容不支持visualViewport的旧设备
  window.addEventListener('resize', handleIOSKeyboardAppear);
}

4. 滚动事件处理优化 #

滚动时先隐藏工具栏，防抖结束后再显示并重新计算位置，避免滚动时工具栏跳动：

let mobileScrollDebounceTimerId = null;

function handleScroll() {
  toolbarElement.style.visibility = 'hidden';
  
  if (mobileScrollDebounceTimerId) {
    clearTimeout(mobileScrollDebounceTimerId);
  }

  mobileScrollDebounceTimerId = setTimeout(() => {
    toolbarElement.style.visibility = 'visible';
    // 重新计算位置
    const currentViewportHeight = window.visualViewport?.height || window.innerHeight;
    const heightDiff = initialViewportHeight - currentViewportHeight;
    toolbarElement.style.bottom = heightDiff > 0 ? `${heightDiff}px` : '0px';
  }, 200);
}

// 绑定滚动事件
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  window.addEventListener('scroll', handleScroll);
}

额外注意事项 #

• iOS部分浏览器滚动时会显示/隐藏顶部导航栏，导致视口高度变化，上述逻辑也能自动适配这种情况。
• 防抖时间建议设为200-300ms，平衡响应速度和事件触发频率。
• 确保工具栏的父元素没有设置transform或overflow: hidden，否则position: fixed会失效。

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