如何解决hammer.js与页面正常滚动的冲突问题

这个问题的核心原因是Hammer.js默认会拦截浏览器的触摸默认行为，包括页面的垂直滚动操作。当你在绑定了drag事件的元素上进行上下滑动时，Hammer.js会优先处理手势事件，直接阻止了浏览器的原生滚动逻辑。

下面给你两个有效的解决方案，你可以根据需求选择：

方案1：通过touchAction配置保留垂直滚动 #

初始化Hammer实例时，设置touchAction: 'pan-y'，明确告诉浏览器我们只需要处理水平方向的拖拽，垂直方向的滚动行为交给浏览器默认处理：

var element = document.getElementById('pinwall-grid');
// 添加touchAction配置，允许垂直滚动
var hammertime = Hammer(element, {
  touchAction: 'pan-y'
}).on("drag", function (event) {
  direction = event.gesture.direction;
  if (direction == 'left') {
    var $meN = $('.pinwall-grid .ctrl a.next');
    if (!$meN.hasClass("nextD")) {
      $meN.trigger('click');
    }
    console.log('left');
  } else if (direction == 'right') {
    var $meP = $('.pinwall-grid .ctrl a.prev');
    if (!$meP.hasClass("prevD")) {
      $meP.trigger('click');
    }
    console.log('right');
  }
  event.gesture.stopDetect();
});

方案2：限制Drag识别器仅响应水平方向 #

如果你只需要处理左右拖拽，可以直接配置Hammer的drag识别器，让它只监听水平方向的手势，这样垂直滑动不会触发drag事件，自然不会阻止页面滚动：

var element = document.getElementById('pinwall-grid');
var hammertime = Hammer(element);
// 配置drag识别器仅响应水平方向
hammertime.get('drag').set({ direction: Hammer.DIRECTION_HORIZONTAL });

hammertime.on("drag", function (event) {
  direction = event.gesture.direction;
  if (direction == 'left') {
    var $meN = $('.pinwall-grid .ctrl a.next');
    if (!$meN.hasClass("nextD")) {
      $meN.trigger('click');
    }
    console.log('left');
  } else if (direction == 'right') {
    var $meP = $('.pinwall-grid .ctrl a.prev');
    if (!$meP.hasClass("prevD")) {
      $meP.trigger('click');
    }
    console.log('right');
  }
  event.gesture.stopDetect();
});

两种方案都能解决你的问题，个人更推荐方案1，因为它通过标准的touchAction属性明确控制触摸行为，兼容性更好，也更符合现代触摸事件的规范。

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