javascript - 如何阻止hammer.js与正常滚动冲突
问题描述
我使用hammer.js 来检测拖拽和滑动。
那是代码:
var element = document.getElementById('pinwall-grid');
var hammertime = Hammer(element).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();
});
如果您在移动设备上上下滑动并且您的手指在我使用hammer.js 定位的div 上,它不会向下或向上滚动视口。
使用 chrome 在移动设备上查看http://86.62.248.112/en/以查看我在说什么,将手指放在最新消息 div 上并滑动。
我该如何解决?
提前致谢。
解决方案
如果有人面临同样的问题,
首先你需要更新你的hammer.js 版本,然后添加touch-action:pan-y
到有问题的div。
推荐阅读
- python - 类型错误:没有名为“kivy._clock”的模块
- flask - 子进程在烧瓶应用程序中调用 sh 脚本文件以运行
- javascript - 向 React Map 添加多个标记
- windows - 将 MinGW-w64 与 Visual Studio Code 一起使用而不将其添加到 PATH
- python - 有没有办法从 python 脚本中获取不断变化的数据,并在 Vue 组件中显示和更新?
- android - BottomNavigationView 后面的片段中的底部工作表
- java - 在 gradle 中创建一个 pom.xml 文件,其范围不是运行时
- firebase - 为什么我的(当前)私人 Firebase 应用程序上会有这么多随机用户?
- java - 使用子图像绘制图像
- python - 如何在熊猫数据框中填写缺失的 5 分钟间隔