Ion-scroll not working


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:

 <div class="wrapper">
  <div class="left-half">
   <ion-scroll style="height: 125px;">
  <div class="right-half">
   <ion-scroll style="height: 125px;">
    --- custom directive here (uses ng-repeat)

.wrapper {
    width: 100%;
    overflow: auto;
.left-half {
    float: left;
    width: 50%;
    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?


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.


You were a saviour :slight_smile:


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

Thank you so much!


Ionic docs are so poor :frowning:


work for me thank you


Thaaank you, God bless you :slight_smile: