How to get jQuery to run during scroll of html pages in iPad (not after scroll stopped)

Question

I'm trying to get a jsbin working properly on the tablet devices.

http://jsbin.com/eQOToDU/2

The background color changes as you scroll down the page - on a PC you use either the mouse scroll or the right hand side bar. But on the tablet you have a touch slide effect. During this time the script doesn't run in the jsbin above. Is there a way around this?

That is, is it possible to run jQuery during the time the page is scrolling on a tablet such as the iPad (after you flick up)?

Edit: I'm trying to use the element.addEventListener('gesturechange', function() {}); from another stack, but I'm not really getting anywhere

JS looks like so:

var colors = [
    [52, 152, 219], // blie
    [155, 89, 182], // purple
    [231, 76, 60], // red
    [230, 126, 34], // orange
    [241, 196, 15], // yellow
    [46, 204, 113] // green
    ];

var height = $(document).height();

$(document).scroll(function () {
    var steps = Math.floor(height / colors.length);
    var position = $(this).scrollTop();
    var currentStep = Math.floor(position / steps);
    if (currentStep === colors.length) currentStep = colors.length - 1;
    var rgb = $("body").css('background-color').replace('rgb(', '').replace(')', '').replace(/\s/g, '').split(',');
    var previousColor = colors[currentStep] || colors[0];
    var nextColor = colors[currentStep + 1] || colors[colors.length - 1];
    var percentFromThisStep = (position - (currentStep * steps)) / steps;
    if (percentFromThisStep > 1) percentFromThisStep = 1;

    var newRgb = [
    Math.floor(previousColor[0] + ((nextColor[0] - previousColor[0]) * percentFromThisStep)),
    Math.floor(previousColor[1] + ((nextColor[1] - previousColor[1]) * percentFromThisStep)),
    Math.floor(previousColor[2] + ((nextColor[2] - previousColor[2]) * percentFromThisStep))];

    $("body").css('background-color', 'rgb(' + newRgb.join(',') + ')');
});