Scrolling Lock Issues on List Items

ionic-v1
1

I am experiencing an issue where ion-lists of ion-items that are all links make the scroll lock up. If starting from a press on a link and trying to scroll, when you pull away and then go back, it locks at the exact height you originally clicked. This also only occurs on lists longer than the visible region.

<ion-view title="'Title'" left-buttons="leftButtons" right-buttons="rightButtons">
  <ion-content
    has-header="true"
    has-tabs="true"
    scroll="true"
    on-refresh="onRefresh()">
    <!-- for pull to refresh -->
    <ion-refresher></ion-refresher>
    <ion-list>
      <ion-item class="item" ng-repeat="ticket in tickets" href="#/tab/ticket/{{ticket.id}}">
        <span class="badge badge-stable">{{ticket.price}}</span>
        <h3>{{ticket.title}}</h3>
        <p>{{ticket.date}} at {{ticket.time}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Another issue that occurs is that this same view won’t allow for sliding right to open the side-menu. (Just found another person having the same issue for this here: Opening a side menu from a list Any fixes for these two issues? Thanks for all your help, I love the framework so far.

1 Like
2

This happens in this codepen for an example. Just drag from an item (down or up) a couple inches, then try and and bring it back past the initial position of the grab. It should be unable to scroll up or down as you continue to hold down.

3

Hi, yes got the same issue on my app too, as if drag or scroll event stop. You need to release your finger and then re-drag.
Any workaround welcomed :slight_smile:

4

I’m clicking, dragging, scrolling all over the place on that demo with no problems in Chrome and Canary - I can’t seem to make it not work as expected. Can you describe your steps in more detail?

Actually, I went back to it and tried again. I see what is happening. However, I have to work pretty hard and against my touch based instincts. You have to :

  • Click and hold
  • Drag up without letting go
  • Drag down without letting go
  • Drag back up - it may lock here
  • Drag back down - it will almost certainly lock

To be honest, I don’t know anyone that drags lists around like that. The more natural touch based interaction is tap -and flick. Yes rarely I will slowly drag a list as I’m evaluating. I’m not sure it’s too big a deal though.

However, I can understand you’d like it fixed. Please open an issue on GitHub.

5

As a developer, it’s easier to notice these things when you try and break your own app. :stuck_out_tongue:

I’ll open an issue. Thanks!

6

I was having an issue where touching a button was supposed to cause the scrollable area to expand, but the scroller would take a second to register the new size of the scrollable area. But I could not scroll down to see the new content without either scrolling up first, or waiting a second.

My fix for this was to use $ionicScrollDelegate.$getByHandle("scrollArea").resize(); on click of my button. This forced the scroller to register the new size so I could scroll immediately.

Make sure you have the delegate-handle attribute of your or set. I am using:

<ion-content delegate-handle="scrollArea">
7

I am facing the same issue of scroll lock on device.
On the large page with many input type text. If i clicked simultaneously on different inputs making the key board appear and disappear my page get scroll get locked from the top. It only reset if I clicked on any other text box at the bottom or read only input.
I have tried this on onfocus and also onblur of the textbox but no help at all.
$ionicScrollDelegate.$getByHandle(“scrollArea”).resize();

8

where to call this $ionicScrollDelegate.$getByHandle(“scrollArea”).resize()