Skip to main content

[WebAPIs] Window 物件

keywords: window#

Window Object @ MDN WebAPIs

執行緒與時間處理相關#

window.requestIdleCallback()#

透過 window.requestIdleCallback() 方法可以把一個函式先放入佇列(queues)中,直到瀏覽器處於閒置狀態(idle periods)時才去執行。這可以讓開發者在不要影響到 latency-critical events (如,動畫、使用者輸入時)執行背景或重要性較低的工作。

一般來說函式都是 FIFO(first-in-first-out)的順序,但是帶有 timeout 的 callback 則稱作 out-of-order

var handleID = window.requestIdleCallback(callback[, options]);

延伸閱讀:Cooperative Scheduling of Background Tasks API @ MDN Background Tasks API

setTimeout, setInterval, requestAnimationFrame#

參考筆記:[計時與動畫 Timer with setInterval, setTimeout, requestAnimationFrame.md]([WEB] 計時與動畫 Timer with setInterval, setTimeout, requestAnimationFrame.md)

Scroll 捲動事件#

取得瀏覽器捲軸的位置: scrollY, pageYOffset#

window.pageYOffset 只是 window.scrollY 的另一個名稱(alias),本質上是一樣的:

window.scrollY;
window.pageYOffset == window.scrollY; // always true。

如果要考慮跨瀏覽器兼容性(cross-browser capability)的話,建議使用下面的寫法:

var start = window.pageYOffset || document.documentElement.scrollTop;

window.scrollY @ MDN

捲軸捲到特定位置:scroll, scrollTo#

window.scroll()window.scrollTo() 的效能一樣,但 window.scrollTo() 的瀏覽器兼容性比較好:

/**
* 直接將捲軸捲動到特定的位置
**/
window.scrollTo(x - coord, y - coord);
// 改變捲動的行為,使其變成平滑捲動
window.scrollTo({
top: yCoord, // optional
left: xCoord, // optional
behavior: 'smooth', // smooth, instant, auto(default)
});

捲軸捲動相對的距離:scrollBy#

// 將捲軸捲動特定的距離
window.scrollBy(x - coord, y - coord);
// 捲動一個 viewport height
window.scrollBy(0, window.innerHeight);
// 平滑捲動
window.scrollBy({
top: window.innerHeight,
behavior: 'smooth',
});

Layout 相關#

使用 CSS Media Query : Window.matchMedia()#

mql = window.matchMedia(mediaQueryString);
mql.matches; // 回傳 true 或 false

使用範例:

if (window.matchMedia('(min-width: 400px)').matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}

座標系統相關#

參考筆記 [Browser Coordinate System 瀏覽器座標系統]([WEB] Browser Coordinate System 瀏覽器座標系統.md)

Last updated on