JavaScript 滾動 API 介紹：scrollIntoView 與其他滾動方法的比較

在網頁開發中，控制頁面滾動是一個常見的需求。之前都是用 window.scrollTo 來控制滾動位置，但現在有了更好用的 scrollIntoView 方法，可以更靈活地控制元素滾動。

scrollIntoView 介紹#

scrollIntoView 是一個非常實用的方法，可以讓指定的元素滾動到可視區域。

基本用法#

1
element.scrollIntoView();
2
// 等同於
3
element.scrollIntoView({ behavior: 'auto', block: 'start' });

參數選項#

1
element.scrollIntoView({
2
  behavior: 'auto' | 'smooth', // 滾動行為
3
  block: 'start' | 'center' | 'end' | 'nearest', // 垂直對齊
4
  inline: 'start' | 'center' | 'end' | 'nearest' // 水平對齊
5
});

其他滾動方法比較#

window.scrollTo / window.scroll#

這兩個方法功能完全相同，都是用來控制視窗滾動到指定位置：

1
window.scrollTo(x, y);
2
// 或
3
window.scrollTo({
4
  top: 100,
5
  left: 0,
6
  behavior: 'smooth'
7
});

window.scrollBy#

相對於當前位置進行滾動：

1
window.scrollBy(0, 100); // 向下滾動 100px

方法比較#

方法	用途	特點
scrollIntoView	將元素滾動到可視區域	最靈活，可以設定對齊方式
scrollTo/scroll	滾動到絕對位置	需要知道確切座標
scrollBy	相對滾動	適合增量滾動

實際應用範例#

點擊按鈕滾動到指定區域#

1
const button = document.querySelector('.scroll-button');
2
const target = document.querySelector('.target-section');
3

4
button.addEventListener('click', () => {
5
  target.scrollIntoView({
6
    behavior: 'smooth',
7
    block: 'center'
8
  });
9
});

返回頂部按鈕#

1
function scrollToTop() {
2
  window.scrollTo({
3
    top: 0,
4
    behavior: 'smooth'
5
  });
6
}

瀏覽器支援度#

scrollIntoView：現代瀏覽器都支援，但 behavior: ‘smooth’ 在 Safari 15 以前不支援
scrollTo/scroll：所有現代瀏覽器都支援
scrollBy：所有現代瀏覽器都支援

結論#

scrollIntoView 最適合用於元素導航，特別是不知道確切座標的情況
scrollTo/scroll 適合滾動到已知的確切位置
scrollBy 適合需要相對滾動的場景

選擇適合的滾動方法可以讓網頁的滾動效果更加流暢自然。

參考資料：

MDN - Element.scrollIntoView()

MDN - Window.scrollTo()