Touch top of iOS status bar to scroll back to top

ionic-v1
1

After scrolling down down through a bunch of ion-list items, it’s very natural for me to tap the top status bar to scroll back up to the top. THis is native behavior for most native apps. Is there a way to easily do this within ionic? or do I need to install another cordova plugin of some sort?

2

I haven’t checked this plugin yet buy why don’t you give it a try and tell us if it works or not: https://github.com/j-mcnally/cordova-statusTap

3

This is already built into ionic.

Tap the header and you will scroll back to the top

4

This wasn’t working by default for me. Only the navbar would tap to scroll, but the iOS status bar wouldn’t do anything on tap.

The cordova-statusTap plugin sort of worked, but has some serious issues with iOS 8.

Installing the cordova statusbar plugin enables a statusTap event, which isn’t documented, but seems to work fine: https://github.com/apache/cordova-plugin-statusbar/blob/master/www/statusbar.js

I got it working well on iOS 7 and 8 with the following code:

angular.module('myApp.services', [])

[...]

.run(function($ionicScrollDelegate, $ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && ionic.Platform.isIOS()) {
      window.addEventListener("statusTap", function() {
        $ionicScrollDelegate.scrollTop(true);
      });
    }
  });
})
6 Likes
5

wow. this works! thx!

6

I just used the above code in my app, it works but after a user touches the status bar then the whole page’s scroll gets disabled so after the page scrolls up, there is no way for a user to scroll down the page again

7

I just ran into this same issue. I traced it down to the fact that $ionicPlatform.ready adds that statusTap event listener every time it’s called. Converting all of those calls in my code to ionic.Platform.ready solved the issue for me, and so far so good in terms of breaking anything else.

8

Hi

How do I disable this functionality? Ideally for certain states only.

9

This is the native behavior of the platform, and can not be disabled

10

When using overflow-scroll=“true”, after tapping the status bar it scrolls up and gets stuck - can’t scroll down.

1 Like
11

This is a documented issue at https://github.com/driftyco/ionic-v1/issues/155. In my case, I removed overflow-scroll="true" and replaced with css overflow-y: scroll!important; for my container and it solved the issue.