对于移动网络套件，当您触摸/拖动水平菜单栏时，如何使水平菜单栏可滚动

For mobile webkit, how can I make the horizontal menu bar scrollable when you touch/drag it?

本文关键字：菜单栏 水平 拖动 滚动 何使 触摸 于移动 移动 套件 网络      更新时间：2023-09-26

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

我的菜单栏宽度为 2000 像素。 当用户触摸并按住菜单div 时，他可以向左/向右移动手指，菜单栏将移动。这允许用户使用手指浏览菜单的所有项目。（向左/向右滚动）

如何在javascript/jquery中做到这一点？

这就像谷歌图片网络视图（在你的手机上去那里）。您可以左右滑动以导航每张图片。

除了。。。我希望它是一个菜单栏，没有"捕捉"。

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

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

要到达您要去的地方，您还需要存储 touchstart 坐标、.menu_bar起始位置，然后使用一些数学知识相对于其位置移动条形图，而不是像上面的例子那样每次都捕捉到手指位置。

希望对:)有所帮助

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

    -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/（这是多设备）

相关文章：