Ionic 1.x - Custom scrollbar in ion-contentDecember 17, 2016
If you consider user experience, mobile is different from desktop. Most of the components in Ionic scale well from mobile to desktop. my struggle was always with scroll in ion-content.
The scroll ion-content provides is not desktop friendly. Its is the scroll for touch. How to make it desktop friendly? Easiest option is to let ion-content user native scrolling (overflow-scroll=true) and use CSS (overflow-y) to get the scrollbar. My thought was whether that will look sophisticated enough to mach Ionic UX. So I explored other JS based scrollbars. I searched for some angular scrollbars and I found the following interesting.
- If native scroll serves your need, replace ion-content with normal div. In my case, I want ion-content inside ion-slide-page.
- Use CSS to power your scrollbar and use viewport units to define height
- overflow-y: auto;height: calc(69vh - 44px);
- My target was to get the scrollbar look good in IE11 and webkit browsers.
- Webkit browsers support CSS properties to customize scrollbars. Use the following codepen for inspiration. https://codepen.io/MathieuRichard/pen/HAgnm
- As you may know, IE11 is not there yet. But you can play with colors to make things work. http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp