navigator feature extend which could detect element in viewport or not

接觸過 scrollspy 後, 一直想要寫個簡單的 extension 來輔助、監聽特定的 element 是否在當前的 viewport 中, 透過這樣的監聽, 可以讓我們做出更多有趣的變化, 更能把資源用在刀口子上, 豐富當前的使用體驗。

於是筆者便擴展 navigator, 透過 method – glance 來動態增 、 減對特定 element 的監聽, 當使用者有 page scroll 的動作發生時, 便會驅動檢查 element 是否在當前的 viewport 中, 並且將相關結果回 call developer 所設置的回呼函數, 來方便 developer 知曉且做出相對應的變化。

以下範例便是 glance 的務實應用, 我們先在第一屏設置一 video, 當 user scroll page 後, 便會偵測該 video 是否在當前 viewport 中, 若有, 則不做任何更動, 反之, 則會將該 video fix 在畫面右下方, 如影隨形, 讓 user 觀看 video 不會因為 scroll 的動作而 lost 任一 sense

※ 歡迎點擊下方連結進行觀看 : – glance: http://mei.homin.com.tw/glanceProto… – demo video: https://youtu.be/SCWUd5xltQo

以下為 demo page 的相關截圖

設置在第一屏的 video

當 page 有 scroll 或者 DOM 操作(node add/remove) 的行為產生後

判斷 video 是否在當前 viewport 中, 若不在, 則會將該 video 固定在畫面右下方

使用方法:

使用方法可以說是簡單非常, 首先, 我們要先把相關的 JavaScript require 到頁面中

當該 js 被 require 進來之後, 便會直接對 navigator 進行擴展

接下來可以透過該 method 來動態增減 element 是否在 viewport 的監聽, 只要有 page scroll 或者 DOM 操作(node add/remove) 或 window resize 的行為產生時, 便會將結果傳入回呼函數中

navigator.glance 需要帶入三個參數, 方能完成有效的監聽, 這三個參數依序分別為: action, element, callback function

– action: 僅接受 “add”, “remove” 這兩個 string, 表對 element 進行 新增 或者 移除 監聽的動作 – element: 設定欲進行監聽的 HTML element – callback function: 設定回呼函數, 當 page scoll 發生時, 便會 detect element 是否在當前 viewport 中, 並將結果傳入該 callback function

Developer 可以反覆的使用 navigator.glance 來同一 element 進行監聽 (同樣的 callback function 僅會被附加一次)

另外, 筆者亦抽出兩個 method 來方便 developer 使用

– navigator.inViewport: 帶入 HTML element, 來判斷該 element 是否在當前 viewport 中

– navigator.glanceRefresh: 原則上 scroll, DOM node 變化以及 window resize 都會驅動偵測 element 是否在 viewport, 不過有些情況 developer 可能做了某些操作導致 page layout 產生了變化, 這時後, 便可以 call 這個 method 來強迫進行偵測判斷

以上便是 navigator.glance 的使用以及所支援的功能, 筆者儘量將設置的門檻降至最低, 讓每個使用的 developer 都可以開開心心的來使用這個 feature, 如果在使用過程中遇到任何的困難或者發現任何問題的話, 請不吝與筆者進行分享與 feedback, 讓筆者將不足或者是缺失的地方補上, 發揮其更大功效, 謝謝

測試環境:

  • OS: Windows 7
  • Browser: Chrome Version 55.0.2883.87 m (64-bit), Firefox 50.1.0, MSIE 11.0.9600.18426, mobile safari (iOS 10.2)

Reference:

轉載文章 – navigator feature extend which could detect element in viewport or not

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *