Scroll Issue with <ion-scroll>

ionic-v1
1

Hello,

I am using a <ion-scroll> element inside a <ion-slide>

The scroll element has n number of <ion-list> and will be populated dynamically and expected to exceed the devise height.

The scroll works fine BUT when I push the elements up to reveal the elements at the bottom - the scroll pushes it back the moment the finger is lifted from the touch screen. Same thing happens with mouse when testing on the PC.

How can I scroll the elements up and lock there ? Please help.

The code I wrote is as follows:

<ion-nav-view animation="slide-left-right">
	   <ion-slide-box on-slide-changed="slideHasChanged(index)" slide-interval="0">
	     
	     <ion-slide>
	     <!-- Openning Page of the App -->
	       <div>
	       		<div class="bar bar-header bar-balanced">
	       			<h1 class="title">News App</h1>	       			
	       		</div>
	       		<div>
	       			<img alt="" ng-src="img/avatars/page-one.png" width="100%" usemap="homemap">
	       			<map name="homemap">
	       				<area shape="rect" coords="132,321,360,516" ng-click="listSlide()" />     
	       			</map>
	       		</div>
				  
	       </div>
	     </ion-slide>

	     <ion-slide>
	       <div>
	       		<div class="bar bar-header bar-balanced">
	       			<h1 class="title">Select News</h1>	
	       			<button class="button button-icon icon ion-ios7-search-strong"></button>       			
	       		</div>
	       		
	       		<div class="list-container">
	       		<h5>Select a channel from the list </h5>
	       		<ion-scroll>
		       		<ion-list>
		       			<ion-item ng-repeat="i in channelList" class="channel-list-item list-items">
		       			<img alt="" ng-src="{{i.img}}" class="circular-image" width="15%">
		       			{{i.name}}
		       			</ion-item>
		       		</ion-list>
		       		</div>
	       		</ion-scroll>

	       </div>
	     </ion-slide>
    </ion-slide-box>	   
</ion-nav-view>
2

If you call

$scope.$broadcast('scroll.resize');

after your items have been added to the dom, this should fix the problem

1 Like
3

Hi iwantwin,

I tried to use your solution and created a directive to throw an event as follows:

app.directive('repeatfinished', function() {
  return function(scope, element, attrs) {
  scope.$watch('$last',function(v){
      scope.$emit('ngRepeatComplete');
    });    
  };
})

Then the listener in my controller -

scope.$on('ngRepeatComplete', function(){
   	scope.$broadcast('list.resize');
});

and finally the DOM elements look like :

<ion-scroll direction="y">
		       		<ion-list>
		       			<ion-item ng-repeat="i in channelList" class="channel-list-item list-items" repeatfinished="">
		       			<img alt="" ng-src="{{i.img}}" class="circular-image" width="15%">
		       			{{i.name}}
		       			</ion-item>
		       		</ion-list>
		       		</div>
</ion-scroll>

This did not solve the issue !

How can I proceed further ?

4

Have you been able to test whether the event was fired on the correct time? Is it really firing after the collection was finished loading?

Your code looks fine, at least for the intention. But I’m pretty new to both angular or ionic, no clue how you should proceed :wink: Sorry…

Maybe @mhartington could shine some light on this?

5

Hi iwantwin,

Yes the Event is fired only after all the elements added to the DOM.

I am also new to Ionic and AngularJS. I was developing apps using Actionscript 3.0. Now migrated to this new domain.

For a closer look at Angular you might review Curran Kelleher’s videos at youtube [ https://www.youtube.com/watch?v=TRrL5j3MIvo ] … this one is awesome and will give you a sound idea.

As regards the scroll … I used style attr on the scroll and it solved like:

<ion-scroll direction="y" style="height:500px">
</ion-scroll>

Please be in touch for future discussion.

Thanks. :smile:

6

Thanks! Have been looking at a lot lately, but I’ll be sure to check your vids pretty soon :wink:

I’ll be happy to stay in touch! Watched this topic to see new posts as well.

I doubt your solution is permanent? Won’t it break after you overflow the 500px?

7

Right …

I am looking for a way to dynamically provide the value of the height …

any idea ?

8

Well, if your items have a default height, height*collectionArray.length would do I guess… Hoping someone has a better way for fixing the scroll.resize :wink: