小點心家族第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 的實現方式，何須呢！

其餘小點心：

通用彈窗

底部浮現彈窗