jquery - 手机javascript中的2D UIScrollView？

Question

我正在尝试在移动网络应用程序的 javascript 中模拟二维 UIScrollView 的行为。虽然 2d 滚动默认在移动 webkit 上工作，但滚动事件似乎有很多错误。例如，我需要在四处拖动屏幕时跟踪左侧和顶部的偏移量。

我发现的大多数 js 库一次只能在一个方向上工作。

非常欢迎提示!

Answer 1

一个例子/进一步的解释。

基础；

• 带有图像的面板，ID 为“plattegrond”
• 我给这个“plattegrond”附加了一个监听器
• 当用户点击 map 时，系统会添加一个单独的元素，用户可以在其中定位和拖动。

scroller 函数是对PANEL (imagePanel) 的引用。拖动对 ELEMENT 的引用 (imageP)

假设您知道如何制作标准面板(滚动:两者；全屏:true)，下面的代码从添加元素开始；

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

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

在我的应用程序中使用的主要代码下方。该代码仅适合我的应用程序的需要，但确实给出了如何使用滚动条偏移和拖动的示例

// 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);

});