我正在尝试针对移动Web应用程序在javascript中模拟二维UIScrollView的行为。虽然默认情况下在移动Webkit上可以使用2d滚动，但是滚动事件似乎非常麻烦。例如，在拖动屏幕时，我需要跟踪左右偏移量。
我发现大多数js库一次都可以在1个方向上工作。
提示非常欢迎！
最佳答案
一个例子/进一步的解释。
基本;
带有图像的面板，ID为“ plattegrond”
我在这个“平台”上附加了一个听众
当用户点击地图时，将添加一个单独的元素，用户可以在其中定位和拖动。
滚动功能是对PANEL（图像面板）的引用。将引用拖动到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);
});