Wednesday, March 1, 2017

Prevent Ionic Header from Auto-Scrolling Content to Top when Header is Tapped

An interesting piece of functionality in Ionic that only became aware of today is "tap-scroll" which auto-scrolls to the top of the screen when the header/title of the view is tapped. This only seems to work in iOS and caused some strange behavior in a view that had some custom scrolling related javascript code. This led me to look for ways to disable this cleanly. It turns out there is an attribute available on ion-header-bar called "no-tap-scroll" that can disable this behavior when set to "true".

Take a look at ionic.bundle.js and you'll see this defined for ion-header-bar.

When setting no-tap-scroll="true" on the ion-header-bar element, you'll be able to disable this auto-scroll to top functionality, which I think is rather unexpected behavior.