vertical scrolling blocked by Hammer.js

Question

i am trying to make an app with Intel XDK (build 2727) and right now my problem is that i can't scroll vertical when i have a list which exceeds the screen size. i tracked the problem down to Hammer.js. This plug-in seems to be used for the sidebar. So i tried to comment the source out and voila, it is working. But I need the sidebar and therefore Hammer.js. After research it turned out that others are having the same issue and the most common solution for this seems to be overflow-y: scroll; i tried it too but had no luck. so, how can i solve this problem without getting into the source data of Hammer.js but for example by making an exception at the CSS sheets?

where are they placed? there are multiple files. hammer.js , sidebar.js, swipe.js , swipe-hammer.js , jquery.hammer.js etc. — Selçuk, Nov 23 '15 at 14:39
I don't know Intel XDK.. The sidebar or the main content seem to have a hammer instance for registering panning or swiping. Update the instance by setting the listener to listen to horizontal only. You need to search for the part where the instance is created in the Intel SDK, I guess. — Thomas, Nov 23 '15 at 14:58

score 12 · Answer 1 · edited Mar 18 '20 at 01:32

12

Use this style in the DOM element CSS in using the Hammer event (JS fallback):

touch-action: pan-y !important;

You will see that vertical scrolling works.

See docs about touch-action property: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

edited Mar 18 '20 at 01:32

amurrell

2,383
22
26

answered Mar 18 '20 at 00:37

Jhosua Espinoza

121
1
2

score 7 · Answer 2 · answered Apr 03 '19 at 12:04

We need to disable pinch, rotate and pan event of hammerjs or need to handle the vertical scroll using hammerjs. hammejs adds touch-action: none; css to the element you apply hammerjs events.

to disable those events in Angular, you can use following configuration:

    export class MyHammerConfig extends HammerGestureConfig {
        overrides = <any>{
            // override hammerjs default configuration
            'swipe': { direction: Hammer.DIRECTION_HORIZONTAL },
            'pinch': { enable: false },
            'rotate': { enable: false },
            'pan': { enable: false }
        };
    }

score 4 · Accepted Answer · answered Nov 23 '15 at 15:25

4

Ok I found a (partial) solution. At swipe-hammer.js ".upage" is hooked up to hammer in all directions. Changed it to DIRECTIONS_HORIZONTAL and that solved the problem for now. The main problem is because the Hammer is hooked up for the whole page and not only the sidebar. Don't know if this is the right way to do it.

Anyway, thanks very much @Thomas for giving me the hint.

answered Nov 23 '15 at 15:25

Selçuk

103
1
8

Glad you found it :) And I hope this does not break other things. – Thomas Nov 23 '15 at 15:38

vertical scrolling blocked by Hammer.js

3 Answers3

Linked