Scroll returns to top

ionic-v1
1

Hi, i’ve got a problem with the <scroll> element. After i put a list in that. I start scrolling it, but after releasing the scroll it returns to the top! How can i change that?
Thanks.

2

Hi,

on which device/os you have the problem?
Maybe you can share the code snippet, so we can take a deeper look into the code.

3

I encountered similar problems. I have a list within a content container, when i open a modal and then close it again, the scroll position is back at the top of the list.

4

I’m trying it in the browser. Anyway here the snippet:

       <scroll direction="y">
        <list id="list">
            <item 
                ng-repeat="item in items" 
                ng-href="#/path/to/elem">
                <p class="nome">{{item.nome}}</p>
                <p class="posiz"><i class="ion-location"></i>{{item.posiz}}</p>
            </item>
        </list>
    </scroll>
5

I’ve found this solution.
My Controller

batApp.controller('MyController', function($scope, $routeParams, $document) {
$scope.scollFunction = function(elem){

  var s = document.getElementById(elem);

  var scroll = new ionic.views.Scroll({
    el: s
  });
}; 
});

And then in my view:

    <div id="scroller" class="scroll">
        <ul class="list">
            <li 
                 ng-repeat="item in items" 
                 ng-href="#/path/to/elem">
                <p class="nome">{{item.nome}}</p>
                <p class="posiz"><i class="ion-location"></i>{{item.posiz}}</p>
            </li>
        </ul>
    </div>
    <div ng-init="scollFunction('scroller')"></div>
6

Hey @LS05, I’d advise against that solution as you are using a controller for what a directive should be.

Any chance you have a demo we can see? I’m not seeing any of those scroll issues in my tests, so I wonder if it’s something being done incorrectly elsewhere.

7

I am having the exact same issue. I believe it has to do with the dynamic change in height.
What is the correct API call to reinit te scroller to the new height?

Even if I just put the expected full code in, I still end up being thrown back up. It seems to go up to -20px.

Any Ideas :anguished:

8

It works for me now.
I had to replace my ionic.css (which was 0.9.23-alpha) with the version off of http://code.ionicframework.com/0.9.23/css/ionic.min.css

Works now

9

hi look putt tag < > ok

in this code that you need is put ion-content/ion-content like this ok this is your code

scroll direction="y"
ion-listt id="list"
item
ng-repeat=“item in items"
ng-href=”#/path/to/elem"
p class=“nome”{{item.nome}}/p
p class="posiz"i class=“ion-location”/i{{item.posiz}}/p
/item
/list
/scroll

----------- and be like this and remenber too ion-listand ion-item for list and item

ion-content
ion-list id="list"
ion-item
ng-repeat=“item in items"
ng-href=”#/path/to/elem"
p class=“nome”{{item.nome}}/p
p class="posiz"i class=“ion-location”/i{{item.posiz}}/p
/ion-item
/ion-list
/ion-content

and everything fine now if want to use scroll you need to give a height or widht using css(style) for example
the same code a use a the ion-scroll its insede a ion-content ok

if you only put ion-scroll when you try return to the top then you need

ion-content
ion-scroll direction=“xy” style="height:500px;width:500px"
ion-list id="list"
ion-item
ng-repeat=“item in items"
ng-href=”#/path/to/elem"
p class=“nome”{{item.nome}}/p
p class=“posiz"i class=“ion-location”/i{{item.posiz}}/p
/ion-item
/ion-list
/ion-scroll
/ion-content”

and everything fine you want add other carateristica like zooming=“true” you can do it.