Mobile Scroll down - makes new objects load, but takes me all the way back to the start

[malav1410]

I am using ng-infinite-scroll - v1.2.0 with Angularjs and Rails 4.

<div flex layout="column" class="main-content" style="overflow-y: scroll; height: 100%" in-view-container>
    <div class="all-categoryheader">
      <h4 class="all-categoryheader-border">Some Header</h4>
    </div>
   <div flex style="padding: 10px;" class="" ng-controller="AppCtrl">
      <div class="objectContainer">
        <div class="cards" layout="row" layout-wrap infinite-scroll="getObjects()" infinite-scroll-container='".main-content"' infinite-scroll-distance="1" infinite-scroll-parent="true" infinite-scroll-immediate-check="false" infinite-scroll-disabled="stopLoadingObjects">  
          <div class ="repeatObject fullObject" ng-repeat="object in objects" flex>
             {{object}}
          </div>
        </div>
      </div>
    </div>
  </div>

Here I am using infinite scroll using parent class method. It's absolutely working perfectly on desktop and my android mobile browser. Here are some issues I am facing mentioned below:

1. If I scroll fast on the desktop or mobile everything loads on a single scroll. So its keep scrolling and keep loading data.
2. On IOS Mobile device Scroll down - makes new objects load, but takes me all the way back to the start, then I have to scroll back to the bottom to load more data and again it will scroll to Top after loading data.