用于网页的单指滚动 - 什么技术？工作实例？

Question

设定：

我有一个本地托管在桌面计算机上的网站，我有一个与该桌面连接的触摸屏。使用Firefox在触摸屏上查看该网站。

要求：

• 从触摸屏启用我的网站的单指滚动。
• 它应该与iPhone的单指滚动目前的工作方式完全相同。
• 它只需要在Firefox中工作。

问题：

• 在这种情况下使用的最佳技术是什么？ （JQuery的/使用Javascript / CSS？）
• 你能为我提供一个有效的例子/解决方案吗？

非常感谢。

Answer 1

我会让你弄清楚细微差别，但这样的事情会给你一个想法

$(function(){

    var dragYStart;
    var dragScrollStart;
    $(window).one('mousedown',startDrag);

function startDrag(e){
    dragYStart = e.pageY;
    dragScrollStart = $(window).scrollTop();
    $(window).on('mousemove',drag);
    $(window).one('mouseup',stopDrag);
}
function stopDrag(e){
    $(window).off('mousemove',drag);
    $(window).one('mousedown',startDrag);
}
function drag(e){
    var delta = dragYStart - e.pageY;
    $(window).scrollTop(dragScrollStart + delta);
}

});

see example

Answer 2

更新......今天早上发现了这个。这可能正是你想要的

http://zynga.github.com/scroller/

Answer 3

对于触摸感知设备上的iOS风格滚动（在桌面上也很好用）iScroll是一个很好的解决方案。

将有问题的触控设备指向此演示网址：http://lab.cubiq.org/iscroll/examples/simple/

功能包括：

• 捏/缩放
• 向上/向下拉动以刷新
• 提高速度和动力
• 对齐元素
• 可自定义的滚动条

-Via iScroll 4 docs

Answer 4

使用“我的”js插件 我也有滑动事件处理程序：D http://hoangminhdat.com/myLab/dragScrollJS/

它不适用于手持设备，但在桌面上运行良好，也非常简单

我做到了：D