Shopify移动端商品区域滚动失效问题及平滑滚动需求

问题根源排查 #

移动端商品区域无法正常滚动，通常是以下两种情况导致：

• 触摸事件（touchmove）被代码或第三方插件调用preventDefault()拦截，阻断了原生滚动行为；
• 滚动容器未正确配置滚动属性，缺少必要的CSS支持。

具体修复步骤 #

1. 移除触摸事件拦截 #

检查页面中商品区域相关的JavaScript代码，找到并删除/注释掉阻止touchmove默认行为的代码：

// 需移除的示例代码
document.querySelector('.product-area').addEventListener('touchmove', function(e) {
  e.preventDefault(); // 这行代码会阻止原生滚动
});

如果是使用轮播、手势类插件导致的冲突，进入插件配置项，关闭"阻止垂直滚动"的相关设置。

2. 配置容器滚动CSS属性 #

给商品列表的父容器添加以下CSS，开启原生滚动并启用平滑效果：

.product-scroll-container {
  overflow-y: auto; /* 允许垂直方向滚动 */
  -webkit-overflow-scrolling: touch; /* 适配iOS弹性滚动特性 */
  scroll-behavior: smooth; /* 原生平滑滚动 */
  height: 100vh; /* 确保容器有固定高度，触发滚动 */
}

注：scroll-behavior: smooth在部分旧Android浏览器中兼容性不佳，可通过JS实现降级。

3. JS平滑滚动降级方案（兼容低版本浏览器） #

如果需要覆盖更多浏览器，添加以下JS代码实现自定义平滑滚动：

const scrollContainer = document.querySelector('.product-scroll-container');

// 鼠标滚轮平滑处理
scrollContainer.addEventListener('wheel', function(e) {
  e.preventDefault();
  const scrollStep = e.deltaY * 1.2;
  scrollContainer.scrollBy({
    top: scrollStep,
    behavior: 'smooth'
  });
});

// 移动端触摸滑动平滑处理
let startTouchY;
scrollContainer.addEventListener('touchstart', function(e) {
  startTouchY = e.touches[0].clientY;
});

scrollContainer.addEventListener('touchmove', function(e) {
  const currentTouchY = e.touches[0].clientY;
  const scrollDiff = startTouchY - currentTouchY;
  scrollContainer.scrollBy({
    top: scrollDiff,
    behavior: 'smooth'
  });
  startTouchY = currentTouchY;
});

4. 优化加入购物车按钮可达性 #

• 可选方案：将按钮固定在视口底部，无需滚动即可点击：

.add-to-cart-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: calc(100% - 40px);
}

• 基础方案：给滚动容器添加底部内边距，确保按钮不被遮挡：

.product-scroll-container {
  padding-bottom: 90px; /* 留出按钮高度+额外间距 */
}

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