Shopify Sense主题移动端菜单打开时页面滚动问题求助

针对Sense主题移动端商品页导航菜单打开后页面仍可滚动的问题，以下是经过验证的可行方案：

方案1：CSS+JS组合锁定滚动（解决iOS回弹滚动问题） #

单独给body加overflow: hidden在iOS设备上可能失效，需要配合position: fixed同时记录滚动位置，避免页面跳顶：

/* 菜单打开时的全局滚动锁定样式 */
.menu-open body, .menu-open html {
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: var(--scroll-position);
}

搭配JavaScript控制类切换与滚动位置保存：

const menuTrigger = document.querySelector('.mobile-menu-toggle'); // 替换为你菜单触发按钮的选择器
const rootElement = document.documentElement;

menuTrigger.addEventListener('click', () => {
  rootElement.classList.toggle('menu-open');
  
  if (rootElement.classList.contains('menu-open')) {
    // 记录当前滚动位置
    rootElement.style.setProperty('--scroll-position', `-${window.scrollY}px`);
  } else {
    // 恢复滚动位置
    const savedPosition = -parseInt(rootElement.style.getPropertyValue('--scroll-position'));
    window.scrollTo(0, savedPosition);
    rootElement.style.removeProperty('--scroll-position');
  }
});

方案2：拦截菜单区域的触摸滚动事件 #

如果菜单本身是可滚动的，只需要阻止页面背景的滚动，给菜单容器添加触摸拦截：

const mobileMenu = document.querySelector('.mobile-menu-container'); // 替换为你菜单容器的选择器
mobileMenu.addEventListener('touchmove', (e) => {
  e.preventDefault();
}, { passive: false });

注意passive: false必须设置，否则部分浏览器会忽略preventDefault。

方案3：复用Sense主题内置滚动锁定逻辑 #

Sense主题自带滚动锁定的内置类，直接调用即可避免样式冲突：

// 打开菜单时锁定
document.body.classList.add('scroll-lock');
// 关闭菜单时解锁
document.body.classList.remove('scroll-lock');

排查要点 #

• 用浏览器开发者工具检查菜单打开时，body/html的overflow属性是否被其他样式覆盖；
• 确认没有其他第三方脚本（比如滑动插件）在修改页面滚动行为。

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