可靠地使用 hammer.js 获取平移事件,同时仍然在 iOS 中自然滚动 ...?
Reliable use of hammer.js to get pan events while still naturally scrolling in iOS ...?
本质上,我希望能够使用 hammer.js 简单地检测任何平移事件(或至少所有 pan-x 事件)的开始和结束,同时仍然允许自然溢出滚动x 轴。 pan 识别器上的 touchAction 声明允许它在 Android > Chrome 上与自然溢出滚动一起工作,但在 iOS > Safari 上则不行(目前不支持触摸动作声明任何 Safari 版本)。
Codepen(debug-mode)
要么
Codepen(normal-mode)
EG.
var hit = document.getElementById('hit');
var text = document.getElementById('text');
var hammer = new Hammer.Manager(hit);
hammer.add(new Hammer.Pan({
direction: Hammer.DIRECTION_ALL,
touchAction: 'pan-x'
}));
hammer.on("panstart", function(ev){
console.log('panstart');
text.textContent = ev.type +" detected.";
});
hammer.on("panend pancancel", function(ev){
console.log('panend');
text.textContent = ev.type +" detected.";
});
是否有可靠的方法来检测平移运动的所有方向(或仅 x),同时允许正常的溢出 scroll-x 行为(在 iOS 中)?我曾尝试将平移识别器切换为垂直,但发现并不总是/可靠地立即检测到平移识别器。
再想想,也许 Hammer.js 对于这个特定的用例来说有点过分了。
通过剥离 Hammer 并简单地使用本机 ontouchstart 和 ontouchend 事件,我已经设法获得了预期的结果。例如:
aDomObject.addEventListener('touchstart', handlePanStart, false);
aDomObject.addEventListener('touchend', handlePanEnd, false);
aDomObject.addEventListener('touchcancel', handlePanEnd, false);
这样,任何触摸事件的默认操作都会落入默认浏览器行为(在我的例子中 - 溢出!)。
本质上,我希望能够使用 hammer.js 简单地检测任何平移事件(或至少所有 pan-x 事件)的开始和结束,同时仍然允许自然溢出滚动x 轴。 pan 识别器上的 touchAction 声明允许它在 Android > Chrome 上与自然溢出滚动一起工作,但在 iOS > Safari 上则不行(目前不支持触摸动作声明任何 Safari 版本)。
Codepen(debug-mode) 要么 Codepen(normal-mode)
EG.
var hit = document.getElementById('hit');
var text = document.getElementById('text');
var hammer = new Hammer.Manager(hit);
hammer.add(new Hammer.Pan({
direction: Hammer.DIRECTION_ALL,
touchAction: 'pan-x'
}));
hammer.on("panstart", function(ev){
console.log('panstart');
text.textContent = ev.type +" detected.";
});
hammer.on("panend pancancel", function(ev){
console.log('panend');
text.textContent = ev.type +" detected.";
});
是否有可靠的方法来检测平移运动的所有方向(或仅 x),同时允许正常的溢出 scroll-x 行为(在 iOS 中)?我曾尝试将平移识别器切换为垂直,但发现并不总是/可靠地立即检测到平移识别器。
再想想,也许 Hammer.js 对于这个特定的用例来说有点过分了。
通过剥离 Hammer 并简单地使用本机 ontouchstart 和 ontouchend 事件,我已经设法获得了预期的结果。例如:
aDomObject.addEventListener('touchstart', handlePanStart, false);
aDomObject.addEventListener('touchend', handlePanEnd, false);
aDomObject.addEventListener('touchcancel', handlePanEnd, false);
这样,任何触摸事件的默认操作都会落入默认浏览器行为(在我的例子中 - 溢出!)。