3

设置：

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

要求：

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

问题：

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

非常感谢。

4

4 回答 4

3

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

$(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);
}

});

看例子

于 2013-03-20T01:20:59.603 回答
2

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

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

于 2013-03-21T20:15:04.817 回答
1

'iScoll' 库已存档。后代见：

https://github.com/cubiq/iscroll [存档/只读] https://web.archive.org/web/20170515081250/http://iscrolljs.com/ https://web.archive.org/ web/20180726185738/http://lab.cubiq.org/iscroll/examples/simple/

截至 2021 年 5 月 18 日，所有链接低于 404。

适用于触控设备上的 iOS 样式滚动（在桌面上也很好用）iScroll是一个很好的解决方案。

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

功能包括：

  • 捏合/缩放
  • 上拉/下拉刷新
  • 提高速度和动力
  • 捕捉到元素
  • 可定制的滚动条

- 通过iScroll 4 文档

于 2013-03-21T01:24:37.363 回答
-2

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

它不适用于手持设备，但在台式机上工作得很好，它也很简单

我做到了：D

于 2013-03-21T01:30:07.480 回答