3

在详细讨论了这个 SO question之后提出了这个问题

问题：

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

可能的解决方案：

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

因此，我继续探索Touch Swipe Jquery Plugin并在JSFiddle Code上提出了一个可能的解决方案，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 上不是很响应。

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

编辑：1

好吧，现在我想我可能已经找到了一个不错的插件，它似乎在台式机和支持触摸的设备上运行良好，该插件名为jquery.dragscroll，我在这里有一个更新的演示

编辑：2

似乎有另一个插件支持触控设备，它被称为Overscroll。我还没有评价它

4

3 回答 3

2

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

于 2013-01-22T01:25:00.417 回答
1

我找到了一个较旧的解决方案并将其修改为水平滚动。我已经在 Android Chrome 和 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/

Vertical 现在有一个简化的 CSS 解决方案，但不适用于移动设备上的水平 DIV 滚动：

-webkit-overflow-scrolling: touch

该问题还要求在桌面上进行鼠标抓取，这可以通过 Nice Scroll 完成，并且如果您需要它，它可以与我上面的解决方案协同工作：

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

var nice = $("#mydiv").getNiceScroll({horizrailenabled: true, hwacceleration: true});
于 2016-02-29T18:40:33.623 回答
0

这是可能的

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"
    });
于 2014-05-09T14:36:24.947 回答