I created several horizontal scrolling lists inside a scrollable ion-content like this:
HTML
<ion-content>
<div class="reps" ng-repeat="item in data">
<div>{{item.title}}</div>
<div class="images-list">
<ion-scroll direction="x">
<div class="image"
ng-repeat="img in item.images">
<img ng-src="{{img}}">
</div>
</ion-scroll>
</div>
</div>
</ion-content>
SCSS
.images-list{
max-height: 120px;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
-ms-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
.image{
display: inline-block;
height: 120px;
padding: 0 1px;
img{
width: auto;
height: inherit;
}
}
}
This is displaying well and it's scrolling horizontally for each sub-list.
The problem is that when I try to scroll over lists (vertical scroll of ion-content) it can only scroll over the outside of the sub-lists but not when scrolling over the sub-lists content.
Any help how can I achieve this to scroll from any area of the screen?
