Ionic Scrolling issue - Page scroll breaks when using ion-scroll

Question

I am pretty new to Ionic Framework and the entire hybrid platform.

I have developed a very simple application by using too many tutorials over the internet and the application is working perfectly as expected except the home page.

I have an overall page view that has an ion-content and then there are multiple ion-scroll on the page.

The problem is the scrolling doesn't work as the normal native Android/iOS application.

Can anyone help with this?

Attached below is the full code:

<ion-view ng-init="LoadPage()">
<ion-content ng-show="contentloading" scroll="true">
    <ion-refresher pulling-text="Pull to refresh" on-refresh="LoadPage()" >
    </ion-refresher>
    <div class="row-no-padding">
        <div class="row row-no-padding row-center" style="padding-left: 5px;">
            <div class="col-33 col-center">
                <h5 class="latest-news headingStyle" data-fittext data-fittext-max="12px">Latest News</h5>
            </div>
            <div class="col col-center">
                <ion-slide-box does-continue="true" auto-play="true" show-pager="false">
                    <ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
                        <h4 class="{{FontDetails(1)}}" style="margin-left: 5px;word-break: break-all;white-space:nowrap;overflow:hidden; color:#bb1515;font-size:12px;" ng-bind-html="item.title | unsafe"></h4>
                    </ion-slide>
                </ion-slide-box>
            </div>
        </div>
    </div>
    <div class="row-no-padding">
        <ion-slide-box does-continue="true" auto-play="true" show-pager="false">
            <ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
                <div class="row-wrap">
                    <div class="col" style="background: url({{item.thumbnail_images.medium.url}}) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;background-size: cover;min-height: 200px;height:250px;max-height:300px;z-index: 1;">
                    </div>
                    <div style="background:black;position:absolute;opacity: 0.5;filter: alpha(opacity=50);height:auto;bottom:0%;width: 100%;overflow:hidden;z-index:2; vertical-align: top;" class="col">
                        <h4 class="latest-news-add {{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h4>
                    </div>
                </div>
            </ion-slide>
        </ion-slide-box>
    </div>
    <!--            </div>
            </div>-->
    <div class="row-no-padding">
        <div class="row row-no-padding" style="padding: 5px;">
            <div class="col col-33 col-center">
                <h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Gujarat'| translate}}</h5>
            </div>
        </div>



        <div  class="row row-no-padding" style="padding: 5px; overflow: auto;white-space: nowrap; overflow-y: scroll; position: relative;">
            <div class="col" >
                <ion-scroll  direction="x" scroll-outside="true" class="wide-as-needed">

                    <span>
                        <span class="wrapperhome" ng-repeat="item in gujarat">
                            <img  on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
                            <div>
                                <h6 class="{{FontDetails(1, 0)}}" ng-bind-html="item.title | unsafe"></h6>
                            </div>
                        </span>
                    </span>

                </ion-scroll>
            </div>
            <!--<div class="col">-->

        </div>
        <div class="row row-no-padding" style="padding: 5px;">
            <div class="col col-33 col-center">
                <h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Politics'| translate}}</h5>
            </div>
        </div>
        <div class="row row-no-padding" style="padding: 5px;">
            <div class="col">
                <ion-scroll direction="x" class="wide-as-needed">
                    <span>
                        <span class="wrapperhome" ng-repeat="item in politics">
                            <img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
                            <div>
                                <h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
                            </div>
                        </span>
                    </span>                    
                </ion-scroll>
            </div>
        </div>
        <div class="row row-no-padding" style="padding: 5px;">
            <!--                <div class="col col-34" style="text-align: center;margin-bottom: 10px;background-color: firebrick;vertical-align: middle;text-align: center;color:white;font-family: HouseGothicHG23Text-Bold;font-size:1.30em;">
                                Technology
                            </div>-->
            <div class="col col-center">
                <h5 class="latest-news {{FontDetails(1)}} categoryHeading ">{{'Technology'| translate}}</h5>
            </div>

        </div>
        <div class="row row-no-padding" style="padding: 5px;">
            <div class="col">
                <ion-scroll direction="x" class="wide-as-needed">
                    <span>
                        <span class="wrapperhome" ng-repeat="item in technology">
                            <img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
                            <div>
                                <h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
                            </div>
                        </span>
                    </span>                    
                </ion-scroll>
            </div>
        </div>
    </div>
    <div class="row row-no-padding" style="padding: 5px;">
        <div class="col">
            <ion-list>
                <div ng-repeat="item in FooterItems" ng-if="(item.MenuOption !== 'Home' || item.MenuOption !== 'Favorite')" style="margin-bottom: 10px;">
                    <ion-item style="border: 0px!important;" class="item-stable item item-icon-left home-item-footer item-icon-right {{FontDetails(1)}}" ng-click="toggleGroup({{item.group}},'{{item.link}}')" ng-class="{active: isGroupShown({{item.group}})}">
                        <i class="icon"><img src="img/{{item.link}}.png" style="width:20px;height:20px;"/></i>
                        {{item.MenuOption| unsafe | translate}}
                        <i ng-class="isGroupShown({{item.group}}) ? 'ion-chevron-down' : 'ion - chevron - right'" class="icon" style="font-size:1em;"></i>
                    </ion-item>
                    <ion-item class="item-accordion" ng-show="isGroupShown({{item.group}})" style="padding-left:1px;padding-top:1px!important">
                        <!--                            <div class="row row-no-padding">
                                                        <div class="col">
                                                            <ion-scroll direction="x" class="wide-as-needed">
                                                                <span>
                                                                    <span class="wrapper" 
                                                                    ng-repeat="categoryitem in item.items">
                                                                        <img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
                                                                        <div>
                                                                            <h6 class = "{{FontDetails(0)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
                                                                        </div>
                                                                    </span>
                                                                </span>                    
                                                            </ion-scroll>
                                                        </div>
                                                    </div>-->
                        <div class="row row-no-padding" style="padding: 5px;">
                            <div class="col">
                                <ion-scroll direction="x" class="wide-as-needed">
                                    <span>
                                        <span class="wrapperhome" ng-repeat="categoryitem in item.items">
                                            <img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
                                            <div>
                                                <h6 class = "{{FontDetails(1)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
                                            </div>
                                        </span>
                                    </span>                    
                                </ion-scroll>
                            </div>
                        </div>
                    </ion-item>
                </div>
            </ion-list>
        </div>
    </div>






</ion-content>

Answer 1

You need to make sure you're declaring the height and width of each <div> you're scrolling. From the ion-scroll docs:

Basic usage:

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; 
         background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat">
    </div>
</ion-scroll>

Note that it's important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas.