问题:
我需要一个水平滚动,可以在桌面上使用鼠标拖动滚动,并在启用触摸的屏幕上滑动事件
可能的解决方案:
我尝试使用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上却不是非常有用。
有人可以帮我提出更好的解决方案吗?我正在使用twitter bootstrap
编辑:1
好吧现在我想我可能已经找到了一个很好的插件,似乎在桌面和触控设备上工作正常,插件名为jquery.dragscroll,我有一个更新的演示here
编辑:2
似乎有另一个插件支持启用触摸的设备,它被称为Overscroll。我还没有评估它
答案 0 :(得分:2)
此外,还有“Swipeview”脚本 http://cubiq.org/swipeview
答案 1 :(得分: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"
});
答案 2 :(得分:0)
我找到了一个较旧的解决方案并对其进行了修改以进行水平滚动。我已经在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});