小点心家族第3位成员——楼层定位效果

ES6小点心，顾名思义，开箱即食，拿来即用。

---

献上第 3 个小点心：Floor。

GitHub

在线演示

以为有用记得 GitHub 点个 star 哟^_^

---

【楼层定位】是前端平常开发中的常见需求。这个效果自己并无什么高深的地方，不出意外的话，通常 Jser 在几十分钟以内就能搞出来一个。但若是把兼容性考虑进去，那状况就要复杂多了。尤为是移动端的兼容性，UI 表现不一致，scroll 事件触发不连续，blabla...。在通过一次实现这种需求的痛苦经历后，咱决心搞一个插件出来，不让前端的小伙伴们再被各类兼容性问题恶心到。

楼层定位的主要逻辑就是在用户触摸屏幕并滑动时根据滚动位置判断当前的【焦点楼层】。说简单也简单，若是是 PC 端，直接监听 scroll 事件就能作到。但放在移动端，IOS 的 scroll 事件触发是不连续的，就会致使作出来的用户体验很是差。做为一名有追求的前端开发，岂能忍受这卡不啦唧的触摸体验。Swiper 的滑动体验挺好的，仔细研究才发现，这B不是原生滚动，而是用 css3 的一些特性实现的模拟滚动。后来找到了 iscroll.js 插件，人家专业作模拟滚动的。因而就果断采用了 iscroll.js 做为滚动模拟器，一路跌跌撞撞，总算把楼层定位写了出来。虽然不算完美，但兼容性相对完整（不承诺兼容全部机型，但大部分主流机器已经过测试），用户体验相随统一且流畅。遂分享出来，欢迎各位来找茬哈^_^

闲话少叙，先上效果图：

简单示例

双向联动

复杂示例

来不及解释了，当即查看示例。

这种效果的主要使用场景主要出如今移动端。

先定一个小目标：

• 易用性，若是本身都以为难用，那就没有分享的必要了￣□￣｜｜；
• 兼容性，兼容主流浏览器，但并不是全部（好比 IE 低版本）；
• 移动优先，主要为移动端作更多的考虑；

依赖 iscroll

依赖一个 jQuery 已经足够令我伤心了，每增长一个依赖，插件的易用性和受欢迎程度都会大大折扣。可是没办法，该依赖还得依赖。若是本身写一个蹩脚的 jQuery 出来，不知道会捣腾出什么隐晦的 bug 出来。之因此选择 iscroll，是由于移动端原生的滚动事件并不尽如人意，若是只服务 PC 端，只须要绑定 scroll 事件就好了。然而到了移动端，状况变得棘手起来。移动端的区域滚动，某些IOS手机上最后的惯性移动触发不了 scroll 事件，并且安卓和 IOS 的区域滚动表现至关不一致。iscroll 正是以解决这些兼容性和不一致为目标，为你们带来丝滑般一致的滚动体验。考虑到本插件的目标——同时支持 PC 和移动端，易用性和体积只能让位于兼容性了o(╥﹏╥)o

若是你对 iscroll.js 一无所知，那就太好了，由于 Floor 已将它封装的足够简单。固然，若是你是个 iscroll.js 砖家，这将给你提供更多的可定制性。若是你对 iscroll.js 感兴趣，那么资源全在下面咯。

IScroll 官网

IScroll API 中文版

使用

和前几个小点心相同的 API 风格，简单，尽量简单。

基本使用

下面是 Floor 最简单的使用：

const floorA = new Floor({
    container: '#floor-A',
})
复制代码

简单，简单是很重要的。【尽量简单】是在设计小点心系列 API 时的第一原则。

onFloorChange

onFloorChange 是本小点心惟一的回调，也是本插件最关键的功能。onFloorChange 的触发时机是仅在【焦点楼层】发生变化时。

scrollTo

将楼层滚动到指定的位置。

因为 scrollTo 是根据 container 和 wrapper 的 offset 去计算位置，margin 不计算在内，border 和 padding 都计算在内，其实有一个最保险的方法就是不要给 container 和 wrapper 设置 margin，border 和 paddding，你就彻底不用去理会这些细节，程序也不会出现怪异的行为。不然的话，最后的程序表现可能不会跟你预想的同样，你就得去研究 scrollTo 的实现方式，何须呢！

其余小点心：

通用弹窗

底部浮现弹窗