vertical scrolling blocked by Hammer.js

问题

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?

回答1:

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.

回答2:

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 }
        };
    }

来源：https://stackoverflow.com/questions/33871606/vertical-scrolling-blocked-by-hammer-js

标签

html

css

phonegap-build

intel-xdk

hammer.js