ES6小點心，顧名思義，開箱即食，拿來即用。
獻上第 3 個小點心：Floor。
覺得有用記得 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 感興趣，那麼資源全在下面咯。
使用
和前幾個小點心相同的 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 的實現方式，何必呢！
其他小點心：