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
?
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.