如何解决移动端Hammer.js滑块的X/Y轴滚动冲突？

这个问题我之前做移动端滑块组件时也碰到过，核心原因是Hammer.js默认会接管所有触摸行为，导致浏览器的原生垂直滚动被阻止了。咱们可以通过调整Hammer的配置和事件监听逻辑，在保留左右滑动切换功能的同时，让垂直滚动正常工作，具体方案如下：

核心思路 #

让Hammer.js只专注处理水平方向的滑动，把垂直方向的触摸行为交还给浏览器，这样用户上下滑动时就会触发原生滚动，不会被滑块逻辑干扰。

修改后的代码实现 #

var element = document.getElementById('pinwall-grid');
// 初始化Hammer时配置允许垂直原生滚动
var hammertime = new Hammer(element, {
  touchAction: 'pan-y' // 告诉浏览器：垂直方向的触摸动作由你处理（即滚动）
});

// 单独监听左滑事件，精准触发滑块切换
hammertime.on('panleft', function(event) {
  var $meN = $('.pinwall-grid .ctrl a.next');
  if (!$meN.hasClass("nextD")) {
    $meN.trigger('click');
  }
  console.log('left');
  // 阻止默认行为，避免水平滑动时触发页面其他意外行为
  event.preventDefault();
});

// 单独监听右滑事件
hammertime.on('panright', function(event) {
  var $meP = $('.pinwall-grid .ctrl a.prev');
  if (!$meP.hasClass("prevD")) {
    $meP.trigger('click');
  }
  console.log('right');
  event.preventDefault();
});

关键改动说明 #

1. 添加touchAction配置：
   这个参数是Hammer.js控制原生触摸行为的关键，'pan-y'表示允许浏览器处理垂直方向的触摸动作（也就是滚动），Hammer只处理水平方向的滑动。

2. 替换drag事件为panleft/panright：
   原来的drag事件会响应所有方向的滑动，现在用更精准的方向事件，只有当用户明确左右滑动时才触发滑块切换逻辑，完全不会干扰垂直滚动。

3. 合理阻止默认行为：
   只在水平滑动时调用event.preventDefault()，避免浏览器把水平滑动误判为其他行为，但垂直滚动因为已经交给浏览器处理，不会受到影响。

兼容旧版Hammer.js的方案 #

如果你用的是较旧版本的Hammer.js（v2.x之前），可以用下面的写法：

var element = document.getElementById('pinwall-grid');
var hammertime = Hammer(element);

// 限制pan事件只监听水平方向
hammertime.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });

hammertime.on('panleft', function(event) {
  var $meN = $('.pinwall-grid .ctrl a.next');
  if (!$meN.hasClass("nextD")) {
    $meN.trigger('click');
  }
  console.log('left');
  event.gesture.preventDefault();
});

hammertime.on('panright', function(event) {
  var $meP = $('.pinwall-grid .ctrl a.prev');
  if (!$meP.hasClass("prevD")) {
    $meP.trigger('click');
  }
  console.log('right');
  event.gesture.preventDefault();
});

这样修改后，你就能在滑块上正常上下滚动查看内容，同时保留左右滑动切换滑块的功能了。

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