对于移动webkit，当您触摸/拖动时，如何使水平菜单栏可滚动？

Question

假设我使用的是标准的iPhone 4。

我的菜单栏的宽度是2000px。当用户触摸并按住菜单div时，他可以左右移动手指，菜单栏也会移动。这允许用户使用他的手指浏览菜单的所有项目。(向左/向右滚动)

如何在javascript/jquery中实现这一点？

它就像Google Images的webview (在你的手机上打开)。你可以向左和向右滑动来导航每个图像。

除了……我希望它是一个菜单栏，没有“抓取”。

Answer 1

这是一个非常基本的例子。不过，它应该会让你朝着正确的方向前进。

$('body').bind({
    'touchmove': function(e){

        $('.menu_bar').css({
            'left': e.originalEvent.touches[0].pageX
        });

    }
});

为了得到你要去的地方，你还需要存储touchstart坐标，.menu_bar开始位置，然后使用一些数学方法来相对于它的位置移动条，而不是像上面的例子那样每次都捕捉到手指的位置。

希望这能有所帮助:)

Answer 2

我仍然对这个问题感到有点困惑，但我相信答案就是使用

    -webkit-overflow-scrolling: touch;

这将适用于iOS5设备，并在激活(即滚动时)时为您提供一个小滚动条

否则，您可以尝试这个插件：http://cubiq.org/iscroll-4

或者：http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/ (多设备)