hammer js > 如何在页面滚动期间阻止水平平移
hammer js > how to block horizontal panning during page scroll
我有一个页面,我在其中放置了一些水平幻灯片,并向它们添加了平移和滑动。可悲的是,当在移动设备上滚动时,如果您在幻灯片上方滚动,hammer 将识别平移并使幻灯片稍微平移……不是那么漂亮。我正在考虑各种解决方案,但最明显的可能是在滚动期间停止平移。有可能吗?这是我当前代码的摘录(抱歉,有些方法来自父 class..):
if(this.options.touch_enabled){
this.hm = new Hammer(this.panels_box, {
recognizers: [
[Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 80 }]
,[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 80 }, ['swipe']]
]
,domEvents: false
});
this.hm.on('swipeleft', function(e){ if(this.options.next_condition()) this.goto('next', null, true); }.bind(this));
this.hm.on('swiperight', function(e){ if(this.options.prev_condition()) this.goto('prev', null, true); }.bind(this));
this.hm.on('panstart', function(e){ this.disable_transition(); }.bind(this));
this.hm.on('panend', function(e){ this.enable_transition(); }.bind(this));
this.hm.on('panleft', function(e){
if(!this.options.loop){ if(this.data_box.getAttribute('data-current') >= this.bounds.end) return; }
this.panels_strip.style.setProperty('--distance', e.deltaX + 'px');
}.bind(this));
this.hm.on('panright', function(e){
if(!this.options.loop){ if(this.data_box.getAttribute('data-current') <= 0) return; }
this.panels_strip.style.setProperty('--distance', e.deltaX + 'px');
}.bind(this));
}// touch
我的解决方案是检查 deltaY 和 deltaX,以及事件类型(因为在台式计算机上没有发现问题)。这里摘录:
this.hm.on('panleft', function(e){ // ...and same for panright
if(e.pointerType == 'touch' && (Math.abs(e.deltaY) > Math.abs(e.deltaX))){ return false; }
// do stuff
}
我有一个页面,我在其中放置了一些水平幻灯片,并向它们添加了平移和滑动。可悲的是,当在移动设备上滚动时,如果您在幻灯片上方滚动,hammer 将识别平移并使幻灯片稍微平移……不是那么漂亮。我正在考虑各种解决方案,但最明显的可能是在滚动期间停止平移。有可能吗?这是我当前代码的摘录(抱歉,有些方法来自父 class..):
if(this.options.touch_enabled){
this.hm = new Hammer(this.panels_box, {
recognizers: [
[Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 80 }]
,[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 80 }, ['swipe']]
]
,domEvents: false
});
this.hm.on('swipeleft', function(e){ if(this.options.next_condition()) this.goto('next', null, true); }.bind(this));
this.hm.on('swiperight', function(e){ if(this.options.prev_condition()) this.goto('prev', null, true); }.bind(this));
this.hm.on('panstart', function(e){ this.disable_transition(); }.bind(this));
this.hm.on('panend', function(e){ this.enable_transition(); }.bind(this));
this.hm.on('panleft', function(e){
if(!this.options.loop){ if(this.data_box.getAttribute('data-current') >= this.bounds.end) return; }
this.panels_strip.style.setProperty('--distance', e.deltaX + 'px');
}.bind(this));
this.hm.on('panright', function(e){
if(!this.options.loop){ if(this.data_box.getAttribute('data-current') <= 0) return; }
this.panels_strip.style.setProperty('--distance', e.deltaX + 'px');
}.bind(this));
}// touch
我的解决方案是检查 deltaY 和 deltaX,以及事件类型(因为在台式计算机上没有发现问题)。这里摘录:
this.hm.on('panleft', function(e){ // ...and same for panright
if(e.pointerType == 'touch' && (Math.abs(e.deltaY) > Math.abs(e.deltaX))){ return false; }
// do stuff
}