滚动时显示/隐藏页脚：桌面正常移动端失效求助

可能原因 #

• 移动端触摸滚动时，onscroll事件触发时机与桌面端存在差异，部分浏览器对window.pageYOffset的处理有延迟
• 仅监听scroll事件未覆盖移动端触摸场景，触摸滚动时逻辑可能无法触发
• 移动端视口（viewport）设置不正确，导致vh/vw单位计算偏差
• 频繁触发的滚动事件可能导致逻辑执行混乱，出现状态更新不及时的情况

解决方案 #

1. 完善事件监听，覆盖触摸场景 #

同时监听scroll和触摸相关事件，用防抖+requestAnimationFrame优化执行时机，保证移动端滚动时逻辑稳定触发：

let prevScrollpos = window.pageYOffset;
let ticking = false;

// 防抖处理，避免频繁执行逻辑
function updateFooter() {
  const currentScrollPos = window.pageYOffset;
  const footer = document.getElementById("footer");
  
  if (prevScrollpos > currentScrollPos) {
    footer.style.bottom = "0";
  } else {
    footer.style.bottom = "-5vh";
  }
  
  prevScrollpos = currentScrollPos;
  ticking = false;
}

// 监听常规滚动事件
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateFooter);
    ticking = true;
  }
});

// 监听触摸滚动事件，覆盖移动端场景
window.addEventListener('touchmove', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateFooter);
    ticking = true;
  }
});

// 触摸开始时重置滚动位置基准
window.addEventListener('touchstart', () => {
  prevScrollpos = window.pageYOffset;
});

2. 修正CSS兼容性问题 #

替换100vw避免横向滚动，添加box-sizing确保尺寸计算准确：

footer{
    position: fixed;
    bottom: 0;
    left: 0; /* 强制对齐左侧，避免偏移 */
    height: 10vh;
    width: 100%; /* 替换100vw，避免移动端横向滚动 */
    transition: bottom 0.2s ease-in-out;
    box-sizing: border-box; /* 确保内边距/边框不撑开宽度 */
}

3. 检查视口设置 #

确保HTML头部添加正确的viewport元标签，保证移动端单位计算准确：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

验证要点 #

• 确认footer元素的id确实为footer，无拼写错误
• 在移动端开发者工具中调试，查看滚动时bottom样式是否正确更新
• 检查是否有其他CSS规则覆盖了footer的position或bottom属性

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