scrollIntoView 與平滑滾動

時間 2021-04-23

標籤 html git github 瀏覽器函數 rest code htm 對象欄目 HTML 简体版

原文原文鏈接

常常有這樣的需求：點擊一個連接（內鏈）跳轉到當前頁面中間某個部分。對於這樣的需求，很容易想到使用錨點實現。但有一個問題：滾動一步到位，太生硬了。html

我仍是比較喜歡平滑滾動。HTML5 中提供了 CSS 屬性 scroll-behavior 而且修改了一系列滾動函數的可接受參數用於支持平滑滾動特性。git

scroll-behavior

這個 CSS 屬性就只接受兩個自定義值：auto 和 smooth。默認值爲 auto，表示馬上滾到底；smooth 即表示平滑滾動。這個屬性會影響滾動函數 scrollTo、scrollIntoView 等的默認滾動行爲，也會影響 scrollTop、scrollLeft 等 DOM 屬性改變時的滾動行爲。若是 scroll-behavior 被設置在根元素（<html>）上，表示應用在視口（viewport）上。這時對錨點、內鏈觸發的視口滾動一樣有效。github

因此只須要給 html 元素設置樣式 scroll-behavior: smooth 點擊內鏈就會觸發頁面的平滑滾動，很簡單吧。瀏覽器

scrollIntoView

上面說到：scroll-behavior 是指定滾動函數的默認行爲，這其中就包括 scrollIntoView。顧名思義：這個函數就是把某個元素滾動到窗口的可見區域。函數

它接受兩種形式的值：布爾值或對象。接受布爾值主要仍是爲了兼容不支持平滑滾動（老版）的瀏覽器。咱們這裏只說對象值。rest

{
  behavior: "auto" | "instant" | "smooth", // 默認 auto
  block: "start" | "center" | "end" | "nearest", // 默認 center
  inline: "start" | "center" | "end" | "nearest", // 默認 nearest
}

對象能夠有三個參數。code

behavior 表示滾動方式。auto 表示使用當前元素的 scroll-behavior 樣式。instant 和 smooth 表示 直接滾到底 和 使用平滑滾動。
block 表示塊級元素排列方向要滾動到的位置。對於默認的 writing-mode: horizontal-tb 來講，就是豎直方向。start 表示將視口的頂部和元素頂部對齊；center 表示將視口的中間和元素的中間對齊；end 表示將視口的底部和元素底部對齊；nearest 表示就近對齊。
inline 表示行內元素排列方向要滾動到的位置。對於默認的 writing-mode: horizontal-tb 來講，就是水平方向。其值與 block 相似。

示例

https://codepen.io/CarterLi/p...htm

惋惜的是，目前瀏覽器支持度欠佳。而 scroll-behavior 做爲一個 CSS 屬性，不能被 polyfill。scrollIntoView 做爲一個 JavaScript 函數對 polyfill 很友好。在目前的狀況下，推薦使用 scrollIntoView 加 polyfill 的方式對象

完

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。