移动/触摸屏幕 - 滑动时水平滚动

这个问题是在详细讨论后提出的这个问题 https://stackoverflow.com/q/11649405/226906

Problem:

我需要一个水平滚动，可以使用桌面上的鼠标拖动和启用触摸的屏幕上的滑动事件来滚动

可能的解决方案：

我尝试使用 jQuery Dragscrollable，它在桌面上运行良好，但在支持触摸的设备上运行不佳

于是我继续探索触摸滑动 Jquery 插件 https://github.com/mattbryson/TouchSwipe-Jquery-Plugin并提出了一个可能的解决方案JSFiddle 代码 http://jsfiddle.net/celestialcitizen/BR4Av/可以找到 JSFiddle 的结果here http://jsfiddle.net/celestialcitizen/BR4Av/embedded/result/

您还可以在以下位置找到工作演示：here http://touchswipedemo.celestialcitizen.jit.su/

我的javascript代码如下

//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;

        $(function() 
        {
                $('.myClass').dragscrollable();
                //if touch is enabled then we have to map the swipe event                         
                if(is_touch_device)
                    $('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
                function scroll_panel_list(event, phase, direction, distance)
                {
                    var pos = $('.myClass').scrollLeft();
                    if(direction == 'left')
                    {
                        $('.myClass').animate({scrollLeft: pos + 200} );
                    }
                    if(direction == 'right')
                    {
                        $('.myClass').animate({scrollLeft: pos - 200} );
                    }
                }    
            });​

我测试过它在 Android 浏览器上运行良好，但在 iPhone 上响应不太灵敏。

有人可以帮我想出更好的解决方案吗？我正在使用 Twitter 引导程序

EDIT:1

好吧，现在我想我可能偶然发现了一个不错的插件，它似乎在桌面和触摸设备上运行良好，该插件称为jquery.dragscroll https://github.com/iwyg/jquery.dragscroll，我有一个更新的演示here http://touchswipedemo.celestialcitizen.jit.su/

EDIT:2

似乎还有另一个支持触摸设备的插件，它叫做过度滚动 https://github.com/azoff/Overscroll。我还没有评价过

此外，还有“Swipeview”脚本http://cubiq.org/swipeview http://cubiq.org/swipeview