1

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>

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks Zack, so will this resolve the issue where the user is not able to scroll the page when they are on the ion-scroll section? sorry i am really a n00b maybe a stupid question
That's intended behavior; <ion-scroll> overrides the base page scroll so long as it is being interacted with. In this instance, you want a margin around your scroll to give your user a way to interact with the base page and trigger the base page's scrolling.
i have made that change but still doesn't work. I am not able to allow the user to interact with the base page instead of the ion-scroll. I want the user to interact with Ion-Scroll only when the user has swiped left or right. My code is on github if you would like to review github.com/swaraasolutions/VishwaGujaratFinal

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.