Ionic 1.x - Custom scrollbar in ion-content

December 17, 2016

Write once and deploy everywhere. And, Ionic does a super job at it. With Cordova, Electron you can almost deploy your HTML5 based app anywhere with 10 - 20% change to source code. That 10 to 20% is the place where you grip across multiple platforms and browsers is tested. 

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. 

But they don't go well with Ionic. After multiple attempts to change to code to work with Ionic, the results were mediocre. So it came down to going back to square one and keeping things simple. 
  • 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. 

You Might Also Like


Popular Posts