<commit_before>---
layout: post
title: "onscroll Event Issues on Mobile Browsers"
date: 2012-08-19
comments: true
categories: [Mobile, Browsers, JavaScript]
---

All browsers will fire an `onscroll` event on the `window` object whenever the window is scrolled.  However, when and how often they fire the event varies greatly.

On desktop browsers this event is fired for every pixel the user scrolls.  But on most all mobile browsers the event is not fired until the *scrolling action* comes to a complete stop.

You can see this by scrolling in the example below:

<iframe style="width: 100%; height: 300px;" src="http://jsfiddle.net/tj_vantoll/p4pww/12/embedded/result,html,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

The `onscroll` event count and the value of `window.scrollY` ([the number of pixels the document has been scrolled vertically](https://developer.mozilla.org/en-US/docs/DOM/window.scrollY)) are updated in an `onscroll` event handler.

If you're viewing this on any desktop browser you'll see that as you scroll the `onscroll` event is continuously firing, `window.scrollY` is continuously updating, and the blue box (which is present so you can visibly tell whether the browser re-paints the screens) is continuously moving.

### Enter Mobile

If you try the same demo on iOS Safari (5.0), the default Android browser <= 2.3, Opera Mobile, or IE on Windows Phone 7 you'll notice something quite different.  As you scroll the `onscroll` event isn't fired, `window.scrollY` isn't updated, and the blue box does not move until the scrolling has come to a complete stop.

You can see this in the video below (the video shows iOS Safari but the same behavior occurs in the other listed browsers):

<iframe width="420" height="315" src="http://www.youtube.com/embed/8rk06wdLbKw" frameborder="0" allowfullscreen></iframe>

### Why

These mobile browsers simply do not fire the `onscroll` event until scrolling has completely stopped.  This includes not only the touch based scrolling itself, but additionally any momentum that the user gives on the scroll.  The event will not fire until it stops.  This is a problem if you want to apply a visual change to the screen as the user scrolls.

### Other Mobile Browsers

Firefox for Android does fire the `onscroll` event and updates `window.clientY` as you scroll, but strangely it doesn't re-paint the screen for any changes that have been applied.

The Android browser in Ice Cream Sandwich fires the event but doesn't feel very responsive and only sporadically re-paints the DOM to move the blue box.  Thankfully, Jelly Bean's Android browser handles this example perfectly.  Everything is updated and rendered smoothly as the user scrolls exactly as desktop browsers do.<commit_msg>Adding a read more cut off to the latest post.<commit_after>---
layout: post
title: "onscroll Event Issues on Mobile Browsers"
date: 2012-08-19
comments: true
categories: [Mobile, Browsers, JavaScript]
---

All browsers will fire an `onscroll` event on the `window` object whenever the window is scrolled.  However, when and how often they fire the event varies greatly.

On desktop browsers this event is fired for every pixel the user scrolls.  But on most all mobile browsers the event is not fired until the *scrolling action* comes to a complete stop.
<!--more-->
You can see this by scrolling in the example below:

<iframe style="width: 100%; height: 300px;" src="http://jsfiddle.net/tj_vantoll/p4pww/12/embedded/result,html,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

The `onscroll` event count and the value of `window.scrollY` ([the number of pixels the document has been scrolled vertically](https://developer.mozilla.org/en-US/docs/DOM/window.scrollY)) are updated in an `onscroll` event handler.

If you're viewing this on any desktop browser you'll see that as you scroll the `onscroll` event is continuously firing, `window.scrollY` is continuously updating, and the blue box (which is present so you can visibly tell whether the browser re-paints the screens) is continuously moving.

### Enter Mobile

If you try the same demo on iOS Safari (5.0), the default Android browser <= 2.3, Opera Mobile, or IE on Windows Phone 7 you'll notice something quite different.  As you scroll the `onscroll` event isn't fired, `window.scrollY` isn't updated, and the blue box does not move until the scrolling has come to a complete stop.

You can see this in the video below (the video shows iOS Safari but the same behavior occurs in the other listed browsers):

<iframe width="420" height="315" src="http://www.youtube.com/embed/8rk06wdLbKw" frameborder="0" allowfullscreen></iframe>

### Why

These mobile browsers simply do not fire the `onscroll` event until scrolling has completely stopped.  This includes not only the touch based scrolling itself, but additionally any momentum that the user gives on the scroll.  The event will not fire until it stops.  This is a problem if you want to apply a visual change to the screen as the user scrolls.

### Other Mobile Browsers

Firefox for Android does fire the `onscroll` event and updates `window.clientY` as you scroll, but strangely it doesn't re-paint the screen for any changes that have been applied.

The Android browser in Ice Cream Sandwich fires the event but doesn't feel very responsive and only sporadically re-paints the DOM to move the blue box.  Thankfully, Jelly Bean's Android browser handles this example perfectly.  Everything is updated and rendered smoothly as the user scrolls exactly as desktop browsers do.
{'fraction_non_alphanumeric': 0.06838524883637666, 'fraction_numerical': 0.011815252416756176, 'mean_word_length': 4.683621566632757, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 12, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1465905', 'n_tokens_mistral': 1527, 'n_tokens_neox': 1425, 'n_words': 803}