CODEWITHSUNDEEP
scrollionic-framework
Gaurav Saini
Gaurav Saini

Reputation: 77

Vertical scroll not working over horizontal scroll list in ionic

I have a window which has vertical scroll and within this scroll i have several image lists which have horizontal scroll.

<ion-content class="container">
    <ion-scroll direction="y" class="wide-as-needed">
        <div>
            <ion-scroll direction="x" class="wide-as-needed">
                <imgcard ng-repeat="item in items" card="item"></imgcard>
            </ion-scroll>
        </div>
        <div>
            <ion-scroll direction="x" class="wide-as-needed">
                <imgcard ng-repeat="item in items" card="item"></imgcard>
            </ion-scroll>
        </div>
        <div>
            <ion-scroll direction="x" class="wide-as-needed">
                <imgcard ng-repeat="item in items" card="item"></imgcard>
            </ion-scroll>
        </div>
        <div>
            <ion-scroll direction="x" class="wide-as-needed">
                <imgcard ng-repeat="item in items" card="item"></imgcard>
            </ion-scroll>
        </div>
        <div>
            <ion-scroll direction="x" class="wide-as-needed">
                <imgcard ng-repeat="item in items" card="item"></imgcard>
            </ion-scroll>
        </div>
        <div>
            <ion-scroll direction="x" class="wide-as-needed">
                <imgcard ng-repeat="item in items" card="item"></imgcard>
            </ion-scroll>
        </div>

</ion-content>

Here <imgcard> directive boils down to this:

<div class="card">
    <div class="card-image">
        <img src="{{card.image}}"/>
    </div>
    <div class="card-description">
        {{card.desc}}
    </div>
</div>

Now the problem is, when on mobile i try to scroll vertically if i am touching the space between the image lists it works fine. But if i touch on the image lists while scrolling vertically it doesnt work.

Upvotes: 3

Views: 821

Answers (1)

JSRound
JSRound

Reputation: 21

I think it's a ionic bug. At the line 8392 of the ionic bundle it's set the variable isScrolling

if ( typeof isScrolling == 'undefined') {
isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
}

but when I debug my application, delta.x==0 and delta.y==0 most of the time so isScrolling==false also. Just add a = to the comparison.

Upvotes: 1

Related Questions