移动/触摸屏启用 - 在刷卡水平滚动(Mobile / Touch Enabled Screens

这个问题已经被问过一个详细的讨论后， 这太问题

问题：

我需要一个水平滚动可使用的触摸屏启用台式机和刷卡事件鼠标拖动滚动

可能的解决方案：

我试图使用jQuery dragscrollable这适用于台式机，但不是触摸功能的设备精

于是我又继续探索触摸滑动jQuery插件 ，并在可能的解决方案上来的jsfiddle代码 ，结果为的jsfiddle可以发现这里

您还可以找到在工作演示在这里

我的Java脚本代码如下

//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上很reponsive。

谁能帮我想出了一个更好的解决办法？ 我使用Twitter的引导

编辑：1

现在好了，我想我可能会在一个不错的插件已经打了，似乎工作在桌面和触摸功能的设备优良，插件被称为jquery.dragscroll ，我有一个更新的演示在这里

编辑：2

似乎是有支持触摸的设备支持另外一个插件，它被称为反弹时 。 我还没有评估它尚未

Answer 1:

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

Answer 2:

这是可能的

http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html

$('body').swipe({
        swipe: function(event, direction, distance, duration, fingerCount) {
            switch (direction) {
                case 'left':
                    // Code here
                    break;
                case 'right':
                   //Code here
                   break;
            }
        },
        allowPageScroll: "vertical"
    });

Answer 3:

我发现了一个旧的解决方案，并修改了它的水平滚动。 我测试了它在Android浏览器和iOS Safari和听众触摸事件已经存在很长一段时间，因此具有良好的支持： http://caniuse.com/#feat=touch 。

用法：

touchHorizScroll('divIDtoScroll');

功能：

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}   

原立式单一手指滚动：

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

立式现在有一个简单的解决方案CSS，在移动DIV水平滚动虽然不工作：

-webkit-overflow-scrolling: touch

这个问题也询问在桌面上的鼠标抢 ，可与尼斯滚动来实现，并且不符合我的解决方案，如果你需要它上面串联工作：

https://github.com/inuyaksa/jquery.nicescroll

var nice = $("#mydiv").getNiceScroll({horizrailenabled: true, hwacceleration: true});

文章来源: Mobile / Touch Enabled Screens - horizontal scroll on swipe