这个问题是在对 this SO question 进行详细讨论后提出的
问题:
我需要一个水平滚动条,它可以在桌面上使用鼠标拖动来滚动,在启用触摸的屏幕上使用滑动事件来滚动
可能的解决方案:
我尝试使用 jQuery dragscrollable,它在桌面上运行良好,但在支持触摸的设备上运行不佳
然后我继续探索 Touch Swipe Jquery Plugin并在 JSFiddle Code 提出了可能的解决方案可以找到 JSFiddle 的结果 here
您还可以在 here 找到工作演示
我的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 上响应不是很好。
有人可以帮我想出更好的解决方案吗?我正在使用推特 Bootstrap
编辑:1
好吧,现在我想我可能偶然发现了一个不错的插件,它似乎在台式机和支持触控的设备上运行良好,该插件名为 jquery.dragscroll ,我有一个更新的演示 here
编辑:2
似乎还有另一个支持触摸设备的插件,叫做Overscroll .我还没有评价它
最佳答案
此外,还有“Swipeview”脚本 http://cubiq.org/swipeview
关于javascript - 移动/触控屏幕 - 滑动时水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11866345/