Hello,
I’m using Ionic to build an app and I haven’t had too many problems so far.
However, I ran into a problem that I can’t seem solve by myself.
The page where the problem occurs looks like this:
<ion-content>
<div class="wrapper">
<div class="left-half">
<ion-scroll style="height: 125px;">
</ion-scroll>
</div>
<div class="right-half">
<ion-scroll style="height: 125px;">
</ion-scroll>
</div>
</div>
--- custom directive here (uses ng-repeat)
</ion-content>
.wrapper {
width: 100%;
overflow: auto;
}
.left-half {
float: left;
width: 50%;
}
.right-half{
width: 50%;
margin: 0 0 0 50%;
}
My problem:
The scrolling of the ion-content works as expected, but I am not able to scroll the two ion-scroll elements.
In Firefox it’s working perfectly fine, in Chrome it only let’s me scroll when I use the mousewheel (or two fingers on my laptop’s touchpad) and on the mobile device (Android 5.1.1) it’s not working at all.
When I try to scroll on the ion-scroll elements, it scrolls the whole ion-content.
It was working correctly when I set the ion-content’s attribute overflow-scroll to ‘true’, but after that the infinite-scroll elements were not working correctly anymore.
Any suggestions what I can do to make the ion-scroll elements scrollable?
EDIT:
I found the solution myself. I added ‘overflow-scroll=“false”’ to the ion-scroll element like this:
<ion-scroll overflow-scroll="false">
Though I have to say that I was quite surprised when I saw that it worked correctly after adding the attribute, since the API doesn’t list ‘overflow-scroll’ as an attribute for ion-scroll.
