javascript - 网页的单指滚动 - 什么技术？工作示例？

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