简体   繁体   中英

HammerJS vertical swipe and VERTICAL scroll simultaneously

I have a fullpage web site on angular 5, which do pagination by vertical swipe down and up (on desctop version is listening for wheel events). On mobile I met a serious problem with non-hiding address bar because of no scrolling happens on page (page have a size of viewport). So my structure looks like this:

<div (swipeup)="fnc()" (swipedown)="fnc()">
    Container handling vertical swipes and has touch-action: pan-y property 
    and 100vh height
    <component>Container handles horizontal swipes inside components</component>
</div>

My current Hammer config:

mc.get('pinch').set({enable: false});
mc.get('rotate').set({enable: false});
mc.get('swipe').set({direction: Hammer.DIRECTION_ALL});
mc.get('pan').set({direction: Hammer.DIRECTION_ALL});

And { "touchAction": "pan-y" } seted to container which handles vertical swipes.

With this config I'm able to scroll with hiding of address bar but vertical swipe doesn't work (or it fires super rare in strange circumstances). But I want vertical swipe to fire every time when scrolling is over and not possible (when I scroll to the bottom and my address bar became hidden it should fire next swipe in the same direction).

I will be grateful for any help or advice on how to do this in different way.

new Hammer(element, {
   inputClass: Hammer.TouchInput,
});

this try

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM