接觸過 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 到頁面中

 <script async src="glance.js"></script>

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

console.log(typeof navigator.glance);// "function"

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

var target, callBack;
target = document.querySelector('.wrap');
callBack = function(target, inViewport) {    console.log(inViewport); //true || false};
//addnavigator.glance("add", target, callBack); //parameter: action, element, callback function
//removenavigator.glance("remove", target, callBack); 

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 僅會被附加一次)

var target, callBack1, callBack2;
target = document.querySelector('.wrap');
callBack1 = function(target, inViewport) {    console.log(inViewport); //true || false};
callBack2 = function(target, inViewport) {    console.log(inViewport); //true || false};
navigator.glance("add", target, callBack1);navigator.glance("add", target, callBack2);

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

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

var target;
target = document.querySelector('.wrap');
console.log(navigator.inViewport(target));// return true || false

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

var target;
target = document.querySelector('.wrap');target.classList.add('force');
navigator.glanceRefresh();

以上便是 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: