Allow page scroll when using ion-scroll

Question

I am creating an app that makes use of ion-scrolls to show rows of data for a mobile app using ionic.

My problem is that when I use a ion-scroll to be able to scroll through lots of data I lose that ability to page scroll unless scrolling on different elements.

I want to be able to scroll through the ion-scroll horizontally but also be able to scroll the page vertically.

I have bastardised an existing code pen example but it shows my problem very well.

In the example you can scroll the page by clicking on the header but you can't scroll the page when clicking on the ion scroll (which is taking up most of the page).

http://codepen.io/anon/pen/EjMqBa

    <ion-scroll delegate-handle="calendarScroll" direction="x">
        <div class="row">
            <div class="col col-20" ng-repeat="day in payPeriod.days">
                <div class="row">
                    <div class="col">{{day.name}}</div>
                </div>
                <div class="row">
                    <div class="col">{{day.number}}</div>
                </div>
            </div>
        </div>
    </ion-scroll>

Jamesla Jamesla · Accepted Answer · 2015-08-12T02:19:41

Fixed it with this:

For some reason, the only way to fix it there was to monkey-patch a line in the ionic.bundle.js:

ignoreScrollStart: function(e) { return //(e.defaultPrevented) || // <-- comment out this first condition to have scroll events bubble up

Found at: https://github.com/driftyco/ionic/issues/2501

Allow page scroll when using ion-scroll

1 Answers