iOS ion-select action-sheet scrolling inertia

#1

On Android the <ion-select> with the action-sheet interface has scrolling inertia making it nice and quick to flick through long lists. On ios however it only scrolls a few line with each swipe. How can I enable scrolling inertia on for iOS action-sheet?

#2

Newest version of Ionic action-sheet includes a SCSS fix for this, but it’s only in Ionic v4. https://github.com/ionic-team/ionic/blob/master/core/src/components/action-sheet/action-sheet.scss

In your project folder, go to:
node_modules/ionic-angular/components/action-sheet

Open action-sheet.scss and change the .action-sheet-group to the following:

.action-sheet-group {
  flex-shrink: 2;
  overscroll-behavior-y: contain;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  pointer-events: all;

  background: var(--background);
}

The line that actually allows inertial scrolling is -webkit-overflow-scrolling: touch;
You could just add that to get the smooth inertial scrolling on a long list. I pasted the whole thing into mine & it works fine.

Ionic4’s action-sheet also has a rule to turn off the scrollbar if you want to do that. I kind of like it for my purposes, so I didn’t add that to my code - you can grab it from the github link above.