Two-way Scroll Problems!

Howdy all!

I’m trying to solve a tricky interaction design problem with Ionic, and I’m almost there. Below is a GIF illustrating the problem.

I have two <ion-scroll> views, both of which are explicitly set to scroll direction="x". I’m also using a custom directive, <ion-affix>, to keep the first of the two scroll-views sticky as the user scrolls down the page. The problem is that users can’t scroll vertically down the page to see more content when swiping up and down on the <ion-scroll> container. They have to use the non scroll-view on the left of the page to do so.

More than happy to toss this code into a CodePen, but does anyone have a suggestion at first blush? I’m entertaining ideas like wrapping the entire thing in a separate <ion-scroll direction="y">, but have serious doubts if that’ll work.

Or, can anyone recommend an Angular plugin that handles this kind of functionality out of the box? (Sticky headers for tabular data)?