Scrolling beyond end of content


#1

I have a list of elements that go past the viewable area in a standard ion-view with nested ion-content, however when scrolling, the viewport goes beyond the end of the content so that the bottom of the last element is at the top of the viewport (i.e. not actually viewable).

How do I get ionic to prevent scrolling beyond the bottom of my content (i.e. bottom of the last element can’t go beyond the bottom of the viewport without snapping back)?


#2

Do you mind putting together some sample code or a codepen/plunkr? It can help easily figure out the whats going on and how to resolve it.


#3

I’m guessing it might be due to the ui-view nesting? Relevant code from the associated views are below:

index.html

<body ng-app="myApp" class="fullscreen" style="background-color:#9FA4A7">
  <div ui-view></div>
</body>

loggedIn.html

<ion-side-menus>
  <ion-pane ion-side-menu-content drag-content="false" >
    <ion-nav-view animation="slide-left-right-ios7"></ion-nav-view>
  </ion-pane>
</ion-side-menus>

tasks.html

<ion-view title="myApp">
  <ion-content has-header="true" padding="false" has-bouncing="true">
    <ion-refresher pulling-icon="ion-ios7-arrow-down"
                   pulling-text="Pull to refresh"
                   refreshing-icon="ion-loading-a"
                   on-refresh="getAndUpdateTasks()">
    </ion-refresher>
    <ion-list option-buttons="taskButtons">
      <ion-item ng-repeat="task in tasks"
                item="task"
                ng-href="#/tasks/{{task.id}}">
          {{task.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>