Woodmart主题：打开迷你购物车时禁止页面滚动的需求

先梳理你现有代码的核心问题：

1. 选择器写法错误：document.querySelector('.wd-close-side wd-fill wd-close-side-opened')是后代选择器逻辑，多类名选择需用.连接，且这个选择器仅指向关闭按钮，会漏掉用户点击购物车图标打开的场景。
2. 缺少no-scroll类的CSS定义：仅给body添加类但未配置样式，无法实现滚动禁止效果。
3. 滚动拦截逻辑不完整：只处理了移动端touchmove事件，未覆盖桌面端滚动场景。

修正后的完整方案 #

第一步：添加CSS样式

在主题自定义CSS区域插入以下代码：

.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  position: relative !important;
}

/* 适配iOS设备，避免滚动穿透问题 */
.no-scroll::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

第二步：替换JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  // 定位Woodmart迷你购物车容器
  const miniCart = document.querySelector('.wd-mini-cart');
  const body = document.body;

  // 监听购物车容器的类名变化（Woodmart用wd-opened标识购物车打开状态）
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'class') {
        const isCartOpen = miniCart.classList.contains('wd-opened');
        toggleScrolling(!isCartOpen);
      }
    });
  });

  // 启动监听
  observer.observe(miniCart, { attributes: true });

  // 滚动状态切换函数
  function toggleScrolling(enableScroll) {
    if (enableScroll) {
      body.classList.remove('no-scroll');
      body.removeEventListener('touchmove', preventTouchScroll, { passive: false });
    } else {
      body.classList.add('no-scroll');
      body.addEventListener('touchmove', preventTouchScroll, { passive: false });
    }
  }

  // 阻止触摸滚动的辅助函数
  function preventTouchScroll(e) {
    e.preventDefault();
  }
});

方案说明 #

• 用MutationObserver监听购物车容器的类变化，能准确捕捉购物车的打开/关闭状态，覆盖所有触发场景。
• CSS通过overflow: hidden和height: 100vh直接禁用桌面端滚动，伪元素处理iOS设备的滚动穿透问题。
• 额外监听touchmove事件并阻止默认行为，确保移动端触摸滑动也被禁止。

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