对于移动Webkit，如何在触摸/拖动时使水平菜单栏滚动？

Question

Let's say I'm on the standard iPhone 4.

My menu bar is 2000px in width. When the user touches and holds on the menu div, he can move his finger left/right, and the menu bar will move. This allows the user to browse all of the menu's items using his finger. (Scrolling left/right)

How can I make that in javascript/jquery?

It's like the Google Images webview (go there on your phone). You're able to swipe left and right to navigate each image.

Except...I want it to be a menu bar, with no "snapping".

Answer 1

Here's a very very basic example. It should get you moving in the right direction though.

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

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

    }
});

To get where you're headed you'll need to also store the touchstart coordinates, the .menu_bar start position and then use a bit of math to move the bar relative to it's position rather than just snapping to the finger position each time like the example above will do.

Hope that helps :)

Answer 2

I'm still a little confused by the question but I believe the answer is just to use

    -webkit-overflow-scrolling: touch;

This will work for iOS5 devices and give you a small scroll bar when active (ie when scrolling)

Otherwise you could try this plugin: http://cubiq.org/iscroll-4

Or: http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/ (which is multi-device)