On your mobile phone, find out when the user scrolls the “past” top of the screen

Question

Imagine a mobile web page with a navigation bar at the very top of the page.

Using javascript / jQuery, I would like to be able to detect when the user scrolls the “past” top of the screen.

Let me try to explain: imagine that the web page has just been loaded and you see the navigation bar at the very top of the screen. Now you put your finger on the screen and drag down . On the iPhone, it will look something like this:

I am looking for something similar to the following:

$(document).ready(function () { $(window).scroll(function (event) { var y = $(this).scrollTop(); if(y < -20)) { //do something } 

Unfortunately, this will not work on Android phones because they do not have the same elastic behavior as the iPhone:

Answer 1

Bad news

So, let's start with the bad news: there is no way to get the information you want initially. What for? Because, as soon as you fall into the “elastic” zone, you drag the entire component of the web view down, and not just the contents of the document, as in your pseudocode.

What does this mean? Emulation or native packaging

Emulation selection

So, you will need to run your own solution, and you will have to make several options. First of all, if you want to use elastic scrolling, you should note that this is patented by Apple Inc. in US7469381 B2 . Please study this patent carefully to make sure that you will not violate (even if you create an application only for iOS, this does not change anything).

Secondly, the question arises whether you really want to imitate the native experience. There is a large lobby against emulating the native experience because of 1) they believe that it can never be perfect enough and 2) as operating systems and a browser, changing your code will be outdated and therefore look awful / strange or maybe even cause completely unexpected behavior / combinations.

Secondly, you will need to decide whether you want for the same resilient behavior on android, or if you want to give more lessons, like an Android experiment. Personally, I think this makes a great superior UX, so I wouldn’t explain the inconvenience of using the elastic effect, but this is something you should carefully consider.

Emulation, scripts

Most scripts that provide this kind of emulation, you want to “update” the scripts. Depending on your specific wishes, you should simply use one of these scripts and either modify them or use some kind of CSS to hide the message inside them.

• Hook.js - Not perfect emulation of your own experience and use of the old iOS background, but a pretty good option nonetheless, to hide the spinner, just use

   .hook-spinner{ display:none; } 

• iScroll.js - Very well-developed code and behaves perfectly. The disadvantage is that it provides much more than what you are looking for, which can be either good or bad. You can find an example implementation of pull to update the behavior here , but pay attention to an older version of iScroll, in the latest version, it looks like this example was not implemented, but it should be very similar. Just look at the code to see how to delete a message to update the message.

• jQuery scrollz - Another option. This seems to be comparable to hook.js , but also has some iScroll features. You can "delete" the message by specifying pullHeaderHTML with empty HTML lines.

Native packaging

The alternative that I am convinced that you do not want to do, but I want to add for the sake of completeness, is to distribute your application as a native application, for example, related to telephone communications. However, in order to get this work, it would require a significant number of changes in the telephone code itself and would not be a viable approach (I once developed a telephone conversation application using my own components and around interactions that caused various javascript events, although doable and represented some advantages, this is not what I would recommend).

Answer 2

So ... I'm not sure why you need this.

If this is for a ListView - you can override onOverScrolled

If you need it for ScrollView - there you can also expand it. I don’t remember now, but if you need it, I can find it.

If this is for the WebView inside your application - I'm sure it is not possible. The amount of control you have in the way you display and process web pages is limited.

If you want the Chrome / share browser to act like iOS does, I don’t think it’s possible if you don’t get the browser code and change it yourself :)