2D UIScrollView in javascript for mobiles?

I'm trying to simulate the behavior of 2 dimensional UIScrollView in javascript for a mobile web app. While 2d scrolling is by default working on mobile webkit, the scroll events seem very buggy. For example, I need to track the left and top offset while dragging the screen around.

Most of the js libs I found work in 1 direc开发者_如何学运维tion at a time.

Tips are very welcome!

An example/further explanation.

Basics;

• A panel with an image, ID of 'plattegrond'
• I attach a listener to this "plattegrond"
• When the user taps on the map, a separate element is added which the user can position and drag around.

The scroller function is a reference to the PANEL (imagePanel). The drag a reference to the ELEMENT (imageP)

Presuming you know how to make a standard Panel (scroll: both; & fullscreen: true), the below code starts on the adding of the element;

imagePanel.add([{ id: "plattegrond", html: plattegrondurl }]);
imagePanel.doLayout();

// Fill a variable for future reference to the added item               
dom = Ext.get("plattegrond");

Below the main code that I use in my application. The code only suits the needs of my application, but does give an example of how to use the scroller Offset & drag

// Register the TAP event on the image
dom.on('tap', function(e){ 

    // Find out about the scroll OFFSET // how much pixels the user has scrolled the Panel  
    var Xscroll = imagePanel.scroller.offset.x;
    var Yscroll = imagePanel.scroller.offset.y;


    // Get the X and Y coordinates of the tap
    var Xpos = e.pageX;
    var Ypos = e.pageY;

    /* Further calculation of exact coordinates

    - If the user hasn't scrolled the Xpos and Ypos can stay unchanged
    - If the user has scrolled, then Xpos - Xscroll && Ypos - Yscroll will be the reel coordinates

    */  

    // Attach a listener to the element that has to be added to the main Panel
    imageP.listeners = {

        dragend: function(element, drag) { 

            // Get the real element that the user touches
            recordid = plattegrondStore.find("puntid", element.el.id);
            record = plattegrondStore.getAt(recordid);      


            // Calculate the real X and Y of the element using the 'drag.deltaX' & 'drag.deltaY'
            delta1 = record.data.x + drag.deltaX;
            delta2 = record.data.y + drag.deltaY;

            /* Further usage of this data (I for example push the new X and Y into a store) */

        },

        scope: this

    }

    // Add image to Panel
    imagePanel.add(imageP);

});