Bubbling scroll events with locked horizontal/vertical scroll


Hi there,

I’ve made a tiny example of a hierarchical based list with horizontal scrollers. However, I have problems with the vertical scroll. When I want to scroll down the list vertically, the events are not bubbling into the list, but are catched by the horizontal scrollers.

Here’s a codepen: http://codepen.io/anon/pen/kuiqe

I was wondering how to achieve a smooth scrolling experience, both vertically and horizontally. Maybe even with locked scrolling, so if I start vertical scroll it is only vertical, and when I do horizontal scroll, it is locked for only that horizontal scroll.

Do you have any ideas on how I should implement this scenario? Any help will be much appreciated.




I don’t have an answer but I’ve been wondering the same thing. I’m going to try and see if you put an event handler on the row div if you can catch the scroll event.

Just noticed your question was from July. Did you ever figure out a solution?


I am facing the similar issue. Any solution/idea ?


I have the same problem. Any solution?


I just recently hacked together a solution for this. It’s not pretty, but it works. The first step is to place a transparent div over your horizontal scrolling content so that you can have scrolling on, but disallow vertical scrolls getting propagated down.

The next step is to attach a directive to the vertical scrolling content to capture drag gesture events. Based on the drag distance, you can directly set the scroll position of your horizontal scrollers.

I can try to abstract some of my code and post it if it’ll help.



I have the same issue, any official solution ?