移动/触摸启用屏幕 - 滑动时水平滚动 [英] Mobile / Touch Enabled Screens - horizontal scroll on swipe

问题描述

有关此SO问题的详细讨论后，已提出此问题

This question has been asked after a detailed discussion on this SO question

问题：

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

I need a horizontal scroll which can be scrolled using mouse drag on desktops and swipe events on touch enabled screens

可能的解决方案：

我尝试使用jQuery dragscrollable，它可以在桌面上正常使用，但不适用于支持触控的设备

I tried using the jQuery dragscrollable which works fine on desktops but not on touch enabled devices

然后我继续探索 Touch Swipe Jquery Plugin 并在 JSFiddle Code 中找到了可能的解决方案，可以找到JSFiddle的结果< a href =http://jsfiddle.net/celestialcitizen/BR4Av/embedded/result/ =nofollow noreferrer>这里

So then I went on to explore Touch Swipe Jquery Plugin and came up with a possible solution at JSFiddle Code and the result for the JSFiddle can be found here

你可以还可以在这里

我的java脚本代码如下

My java script code is as follows

//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上却不是很有用。

I have tested it works fine on Android browser but not very reponsive on iPhone.

有人可以帮我提出更好的解决方案吗？我正在使用twitter bootstrap

Can someone help me come up with a better solution ? I am using twitter bootstrap

编辑：1

现在我想我可能会遇到一个不错的插件这似乎在桌面和触控设备上运行良好，该插件名为 jquery.dragscroll ，我有一个更新的演示这里

Well now I guess I might have hit upon a nice plugin in that seems to work fine on desktops and touch enabled devices, the plugin is called jquery.dragscroll, I have an updated demo here

编辑：2

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

There seems to be another plugin that has support for touch-enabled devices, it is called Overscroll. I haven't evaluated it as yet

推荐答案

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

Additionally, there is the "Swipeview" script http://cubiq.org/swipeview

这篇关于移动/触摸启用屏幕 - 滑动时水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！