Hammer.js tap事件导致父级div无法滚动的技术咨询

我之前做跨端适配时也碰到过一模一样的情况——给滚动容器里的子元素绑定tap事件后，容器的水平滚动直接失效了。这本质是Hammer.js的手势事件处理和浏览器原生滚动行为冲突导致的，给你几个实用的解决办法：

1. 配置Hammer.js的touchAction选项（最推荐） #

Hammer.js默认会拦截部分原生触摸行为来实现手势识别，这会干扰父容器的滚动逻辑。你只需要在初始化Hammer实例时，指定touchAction为pan-x，明确告诉浏览器保留水平方向的原生滚动能力：

// 选中所有.attribute子元素
const attributeItems = document.querySelectorAll('.attribute');

attributeItems.forEach(item => {
  // 初始化Hammer时添加touchAction配置
  const hammer = new Hammer(item, {
    touchAction: 'pan-x' // 允许浏览器处理水平滚动
  });

  hammer.on('tap', (e) => {
    // 你的tap事件逻辑，比如设置其他区域文本
    document.querySelector('#targetElement').textContent = e.target.textContent;
  });
});

2. 检查tap事件处理函数是否意外阻止了默认行为 #

如果你的tap事件代码里写了e.preventDefault()或者e.stopPropagation()，一定要删掉！这些语句会阻断事件传递到父容器，直接导致滚动失效。确保你的事件处理逻辑只做必要操作，不要随意阻止事件流。

3. 额外优化：给父容器添加滚动顺滑度配置（可选） #

如果移动端滚动还是有点卡顿，可以给父容器的CSS加上-webkit-overflow-scrolling: touch;，让滚动体验更接近原生App：

.attributescroll { 
  float: left; 
  width: 100%; 
  height: 100px; 
  background: #1A1A1A; 
  overflow: hidden; 
  overflow-x: auto; 
  white-space: nowrap; 
  cursor: pointer;
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
}

试一下第一个方法，基本就能解决问题了，我当时就是这么搞定的😉

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