仿写支付宝更多页面中的滚动导航效果：
工具：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
（上班时间，文章写的仓促，请包涵，如发现问题还请指正）
网友评论