如何通过注入代码实现iOS WKWebView页面底部栏滚动隐藏效果

注入JS代码的原因 #

原有开发者对WKWebView原生逻辑做了定制修改，且站点本身的底栏交互大概率和App原生底部TabBar存在布局、交互冲突，所以需要通过注入JS主动接管底栏的显隐逻辑，同时联动原生TabBar的显示/隐藏，避免出现双层底栏、布局错位等问题。

现有代码不符合逻辑的问题点 #

• 元素选择器错误：你观测到的底栏类名前缀为styles___MobileFixedBar-sc-x9qtiw-0，但现有代码的选择器漏掉了sc-字段，且后缀jcioIC和实际的fMaMax/ivYpwt不符，根本无法选中目标底栏元素，是上滑隐藏失效的核心原因
• 缺少元素存在性校验：如果代码执行时底栏还未渲染完成，直接调用offsetHeight、修改style会抛出JS错误，导致后续逻辑全部中断
• 滚动事件绑定方式存在兼容性风险：直接赋值window.onscroll会覆盖页面本身绑定的滚动事件，容易引发站点原有交互异常
• 滚动阈值设置偏大：88px的滚动触发阈值会导致隐藏/显示响应滞后，体验和原生Safari访问不一致

修正后的注入代码 #

建议优先复用站点本身的类切换逻辑实现显隐，避免直接修改display带来的样式冲突，完整注入代码如下：

// 初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 用前缀匹配选择器，兼容动态后缀的类名
  const bottomBar = document.querySelector('div[class*="styles___MobileFixedBar-sc-x9qtiw-0"]');
  const hideFlag = document.querySelector('div#FA-HIDE_BOTTOM_NAV');
  
  // 联动原生TabBar显隐
  if (hideFlag) {
    window.webkit.messageHandlers.hideTabBar.postMessage('hideTabBar');
  } else {
    window.webkit.messageHandlers.showTabBar.postMessage('showTabBar');
  }

  // 底栏存在才执行后续逻辑
  if (bottomBar) {
    // 设置main的底部padding，避免内容被底栏遮挡
    const bannerHeight = bottomBar.offsetHeight;
    document.querySelector('main').style.paddingBottom = `${bannerHeight}px`;

    // 初始化滚动变量
    let oldScrollY = window.scrollY;
    // 用addEventListener绑定滚动事件，不覆盖页面原有逻辑
    window.addEventListener('scroll', function() {
      const currentScrollY = window.scrollY;
      // 滚动阈值调整为20px，响应更灵敏
      if (Math.abs(oldScrollY - currentScrollY) > 20) {
        // 向上滚动：隐藏底栏，切换为对应隐藏类
        if (oldScrollY > currentScrollY) {
          bottomBar.classList.remove('fMaMax');
          bottomBar.classList.add('ivYpwt');
        } 
        // 向下滚动：显示底栏，切换为对应显示类
        else {
          bottomBar.classList.remove('ivYpwt');
          bottomBar.classList.add('fMaMax');
        }
        oldScrollY = currentScrollY;
      }
    });
  }
});

代码说明 #

• 用DOMContentLoaded事件确保DOM渲染完成后再执行逻辑，避免元素不存在的报错
• 类名前缀匹配选择器适配站点动态生成的类名后缀，不会因为站点构建更新类名后缀就失效
• 复用站点本身的显隐类切换逻辑，和Safari直接访问的表现完全一致
• 用addEventListener绑定滚动事件，不会干扰站点本身的交互逻辑

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