基于iscroll的滚动导航

仿写支付宝更多页面中的滚动导航效果:

   工具:jquery、iscroll-probe.js

    iscroll介绍:

iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。

它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错,iScroll可以在此基础上提供更多不可思议的功能。具体来说:

细粒度控制滚动位置,甚至在滚动过程中。你总是可以获取和设置滚动器的x,y坐标。

动画可以使用用户自定义的擦出功能(反弹'bounce',弹性'elastic',回退'back',...)。

你可以很容易的挂靠大量的自定义事件(onBeforeScrollStart, *

开箱即用的多平台支持。从很老的安卓设备到最新的iPhone,从Chrome浏览器到IE浏览器。

关于版本:

iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。

iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。

iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。

iscroll-zoom.js,在标准滚动功能上增加缩放功能。

iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素

我使用的是iscroll-probe.js版本,之所以使用这个版本是因为该例子中需要用到监听滚动的事件

onScroll事件

The scroll event is available on iScroll probe edition only (iscroll-probe.js). The probe behavior can be altered through the probeType option. scroll事件在iScroll probe edition版本中有效(仅包含在iscroll-probe.js脚本文件中)。可以通过改变probeType选项值来改变scroll事件的触发时机。

options.probeType

这个属性是调节在scroll事件触发中探针的活跃度或者频率。有效值有:1, 2, 3。数值越高表示更活跃的探测。探针活跃度越高对CPU的影响就越大。

probeType: 1 对性能没有影响。scroll事件只有在滚动条不繁忙的时候触发。 probeType: 2 除了在势能和反弹范围内,将在scroll事件周期内一直执行。这类似于原生的onScroll事件。

probeType: 3 像素级的触发scroll事件。注意,此时滚动只关注requestAnimationFrame(即:useTransition:false).

注意iscroll在4.0和5.0版本在实例化的时候是4.0是new iScroll而5.0是new IScroll

使用iscroll时一定注意html的布局,以及对应元素的定位,否则很容易导致滚动区域无法滚动的情况,具体代码请参考:https://github.com/2276692243/iscrollNav

demo链接点这里:https://2276692243.github.io/iscrollNav/index.html

(上班时间,文章写的仓促,请包涵,如发现问题还请指正)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • title: IScroll-5的文档date: 2017-07-03 11:10:40tags: javascr...
    Gary23阅读 2,601评论 0 9
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,967评论 3 119
  • 惊蛰 夜 在雨落下的两个小时又三十二分钟的时候,我终于来到了街角的奶茶店。只不过,这一次我是为了避雨。雨很大,一...
    Hey_im_here阅读 202评论 0 0
  • 在儿子的成长中,我大多数时候能够使用正面管教的工具,但依然面对许多挑战手足无措,不得不说最近两周的坚持阅读,...
    苗条小猪猪阅读 262评论 0 0
  • 年龄不小 然不懂爱 生活强加的不完美 使我负重前行 若干年前 也曾怦然心动吧 可后来心化作磐石 无转移 无处可转移...
    蜗牛sister阅读 199评论 0 0