How to detect horizontal scroll in panel (to disable vertical scroll meanwhile) in sencha touch

Question

we're using sencha touch for a webpage that contains five panels scrollable horizontally, all contained in a nestedList that's scrollable vertically.

Everthing works fine but the scrolling is loose (because the page is scrollabe both ways, if the scrolling over a panel is a little inclined the whole page also scrolls )

So what i want to do is to forbid vertical scrolling when horizontal scrolling is happening, How can i detect this ?

notes :

-I can't use a caroussel because the panel shows several items simultanously (not only one)

-I tried to detect the scroll with jquery .scroll(), but it doesn't get triggered

Thank you

Answer 1

What you want is directionLock. You should put this configuration in the inner panels which are scrollable.

Example:

var panel = Ext.create('Ext.Container', {
    scrollable: 'vertical',
    items: [
        {
            scrollable: {
                direction: 'horizontal',
                directionLock: true
            },
            html: 'horizontal scroller'
        }
    ]
});