Ion-scroll is scrolling incorrectly

ionic-v1
1

When I scroll through a list of search results, the entire page moves up and down. I saw somebody explaining this problem before on this forum but I can’t find the topic. Does anybody know what is causing this issue?

These pictures display the problem

Normal (not scrolling)
image

Scrolling down
image

Scrolling Up

image
Up.png375×535 266 KB

Code

<ion-view title="Activity Port" hide-back-button="true">
<ion-content class="padding" >

<div class="bar bar-header bar-dark item-input-inset fixedLocation">
    <ion-search class="search-wrapper-light" placeholder="Search a location or activity" min-length="0" model="users" source="getUsersByName(str)"></ion-search>
</div>
 <ion-scroll direction="y"   locking="true">
<div class="list searchBarResults">
<div ng-repeat="user in users" class="item itemMinSize">
    {{user.name}}
</div>
</div>
</ion-scroll>

<div class="card">
    <div class="slide-wrapper">
        <ion-slide-box 
        active-slide="activeSlide" 
        auto-play="true" 
        show-pager="true" 
        does-continue="true" 
        slide-interval="{{interval}}"
        pager-click="changeSlide(index)"
        on-slide-changed="slideHasChanged(index)">
        <ion-slide class="adSlide" ng-repeat="advert in adverts" ng-init="updateSlider()">
        <div class="box"><img class="adImg" ng-src="img/advert{{advert.id}}.jpg"><h5>{{advert.name}}</h5></div>
    </ion-slide>
</ion-slide-box>
</div>
</div>
<div class ="card">
    <div class="item item-divider">
        Activity Categories
    </div>
    <ion-list > 
    <ion-item class="activityCategories">                         
    <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" locking="true">                     
    <div class="divHorizontal" ng-repeat="category in categories">
     <a href="#/activities/{{category.cname}}">
        <img src="img/{{category.cname}}.jpg" class="image-list-thumb">        
        <p>{{category.cname}}</p>
    </a>
</div>
</ion-scroll> 
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-view>

Relavant CSS

.searchBarResults{
	max-height: 200px;
   // overflow-y: scroll;    
}

.itemMinSize{
	height: 40px;
	font-size: 15px;
	vertical-align: middle;
	padding-top: 8px;
}

.fixedLocation{
	
}
2

If I understood you correctly, you want to prevent Content from stretching during content scrolling.

Just add: scroll=“false” to content container, like this:

Example can be found here: http://www.gajotres.net/ionic-framework-series-13-touch-gestures/

First try top and bottom swipe on the embedded example, then try it in a provided link (large blue button),

3

I can get it to work if there a way to change scroll=“false” to scroll=“true” during runtime? So if a user has entered text in the search box, the scroll is set to false and vice-versa if the user deletes all text from the search box.

Thank you by the way!

Edit: I found this How to disable content scrolling?

4

Why don’t you test it? I think it should work.