Ion-scroll not working


#1

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.


#2

You were a saviour :slight_smile:


#3

I’ve been trying to find a freaking fix for this for almost 4 months.

Thank you so much!


#4

Ionic docs are so poor :frowning:


#5

work for me thank you


#6

Thaaank you, God bless you :slight_smile: