移动端滚动隐藏导航栏功能失效问题排查求助

• 移动端设备不触发wheel事件：该事件仅针对鼠标滚轮操作，而移动端采用触摸滑动交互，不会触发此事件，这是核心原因。
• 原代码仅监听了wheel事件，未适配移动端的触摸滑动事件，导致移动端无响应。

替换原有脚本，同时兼容桌面端wheel事件和移动端触摸事件：

var menu = document.getElementById("navbar");
let touchStartY = 0;

// 桌面端滚轮事件监听
document.addEventListener("wheel", handleScroll);
// 移动端触摸事件监听
document.addEventListener("touchstart", handleTouchStart);
document.addEventListener("touchmove", handleTouchMove);

function handleScrollUp() {
  menu.style.bottom = "0";
}

function handleScrollDown() {
  menu.style.bottom = "-60px";
}

// 桌面端滚动处理
function handleScroll(event) {
  if ((event.wheelDelta && event.wheelDelta > 0) || event.deltaY < 0) {
    handleScrollUp();
  } else {
    handleScrollDown();
  }
}

// 记录触摸起始位置
function handleTouchStart(event) {
  touchStartY = event.touches[0].clientY;
}

// 处理触摸滑动
function handleTouchMove(event) {
  // 防止页面滑动冲突，若影响页面正常滚动可移除
  event.preventDefault();
  const touchCurrentY = event.touches[0].clientY;
  const diff = touchCurrentY - touchStartY;
  
  // 滑动距离大于10px才触发，避免误触
  if (Math.abs(diff) > 10) {
    if (diff > 0) {
      // 手指向下滑（页面向上滚动），显示导航栏
      handleScrollUp();
    } else {
      // 手指向上滑（页面向下滚动），隐藏导航栏
      handleScrollDown();
    }
    touchStartY = touchCurrentY;
  }
}

• 若移除event.preventDefault()后出现导航栏触发不灵敏的情况，可以适当调整滑动距离阈值（比如把10px调小）。
• 保留桌面端wheel事件逻辑，确保原有功能不受影响。

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