单指滚动网页-什么技术?工作榜样

Single finger scroll for Webpage - what technology? working example?

本文关键字：工作 榜样 技术 什么 滚动 网页 单指      更新时间：2023-09-26

设置：

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

要求：

  • 从触摸屏启用单手指滚动我的网站
  • 它的行为应该与iPhone的单指滚动功能完全一样
  • 它只需要在Firefox中工作

问题：

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

非常感谢

我会让你找出细微差别，但这样的东西会给你一个想法

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

参见示例

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

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

"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是一个很好的解决方案。

将有问题的触摸设备指向此演示url:

http://lab.cubiq.org/iscroll/examples/simple/

功能包括：

  • 收缩/缩放
  • 向上/向下拉以刷新
  • 提高了速度和动量
  • 捕捉到元素
  • 可自定义滚动条

-通过

iScroll 4文档

使用"mine"js插件我还有滑动事件处理程序：Dhttp://hoangminhdat.com/myLab/dragScrollJS/

它不能在手持设备上工作，但在桌面上工作得很好，它也是非常简单的

我做到了：D

相关文章：