【问题标题】：Single finger scroll for Webpage - what technology? working example?网页的单指滚动 - 什么技术？工作示例？
【发布时间】：2013-03-08 20:34:44
【问题描述】：

设置：

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

要求：

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

问题：

在这种情况下最好使用什么技术？（JQuery/Javascript/CSS？）
能否为我提供一个可行的示例/解决方案？

非常感谢。

【问题讨论】：

我很确定触摸滚动是在驱动程序级别而不是内容级别实现的。
触摸滚动基本上相当于用鼠标做同样的单指触摸滚动动作，我相信......因此这不应该通过捕获鼠标事件（也就是普通网络）来实现技术的东西？
您目前如何在相关触摸屏上滚动浏览网页？
作为touch 事件是否有效的快速测试（我的钱是肯定的），请在您的设备上导航至this iScroll demo page。更多关于 iScroll 4 here.
@Code - 很公平，同意不同意。那么无论如何，谁制造了有问题的设备？

标签： javascript jquery css web scroll

【解决方案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 docs~~

【讨论】：

图书馆已被其所有者归档：github.com/cubiq/iscroll 此答案已更新，包含指向 archive.org 快照和相应的 [已归档] Github 存储库的链接。

【解决方案2】：

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

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

【讨论】：

嘿亚当，感谢您的更新，尝试了这个库，但不幸的是它没有工作。 :( +1 添加一个可能对其他人有用的新解决方案！

【解决方案3】：

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

不能在手持设备上使用，但在台式机上效果很好，也很简单

我做到了：D

【讨论】：

【解决方案4】：

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

$(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

【讨论】：

这很好用，除了一个小问题。需要滚动的列表是巨大的，因此滑动和放开以获得长而连续的滚动的特性非常重要。这是此代码所没有的。当您松开手指时，它会立即停止滚动。
查看我的新答案，认为我为您找到了一个开箱即用的解决方案。

“iScoll”库已归档。后代见：

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

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