我有一个有效的标记和脚本,可以使用Hammer.js跟踪容器上的水平滑动:
const container = document.getElementsByClassName('swiper')[0];
const manager = new Hammer.Manager(container);
const swipe = new Hammer.Swipe();
manager.add(swipe);
manager.on('swipe', event => {
if (event.offsetDirection === 4) {
container.style.background = 'red';
}
if (event.offsetDirection === 2) {
container.style.background = 'blue';
}
});
.swiper {
height: 100vh;
background: grey;
}
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<h1>Some content</h1>
<div class="swiper"></div>
<h1>More content</h1>
小提琴
https://jsfiddle.net/vzg7fy9q/1/
这很好,我已经用它触发了一个滑块。
但是,问题是,似乎所有的滑动事件都可以防止。用户无法再在移动设备上向上或向下滚动。我已经在装有iOS 11的iPhone上对此进行了测试。
是否可以告诉Hammer.js传播这些事件而不是消耗它们?
答案 0 :(得分:0)
我已通过显式设置应使用DIRECTION_HORIZONTAL
进行跟踪的方向来进行修复。我还删除了Hammer.Manager
:
const hammer = new Hammer(container, {});
hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammer.on('swipe', event => {
if (event.offsetDirection === 4) {
container.style.background = 'red';
}
if (event.offsetDirection === 2) {
container.style.background = 'blue';
}
});