[譯] scroll-behavior 滑順的捲動(dòng)效果

PiscesYE 發(fā)布于2019-08-21 10:52 / 2119人閱讀

摘要：不過(guò)這個(gè)效果感覺(jué)上就像是閃一下就切換到該位置。為了使用體驗(yàn)上的感覺(jué)有時(shí)候網(wǎng)站會(huì)設(shè)計(jì)一種平滑捲動(dòng)到該位置的效果。的方式非常簡(jiǎn)單，只要在該元素設(shè)定注意是而不是這個(gè)方式非常方便不過(guò)目前只有支援，查閱。

眾所皆知 HTML 錨點(diǎn)(anchor link)透過(guò)給定標(biāo)籤 id 屬性跳到頁(yè)面上特定位置的功能。不過(guò)這個(gè)效果感覺(jué)上就像是閃一下就切換到該位置。
為了使用體驗(yàn)上的感覺(jué)有時(shí)候網(wǎng)站會(huì)設(shè)計(jì)一種平滑捲動(dòng)到該位置的效果。

在過(guò)去這樣的效果通常會(huì)透過(guò) jQuery 來(lái)達(dá)成，但有時(shí)候一些簡(jiǎn)單的頁(yè)面為了達(dá)成這個(gè)功能就需要載入一堆函式庫(kù)或框架這未免有點(diǎn)矯枉過(guò)正。
最新的 Javascript 提供了一個(gè)更有效率，加強(qiáng)原生 window.scrollTo 的方式。

一個(gè)標(biāo)準(zhǔn)的錨點(diǎn)已經(jīng)是一個(gè)被廣泛使用的基本技巧: 透過(guò)這種方式就算新的 smooth scroll 滑順捲動(dòng)的語(yǔ)法不被支援就的方法仍然會(huì)運(yùn)作，就是跳到該位置。

Click to somewhere ...

This is the target

要注意的是頁(yè)面內(nèi)容要超過(guò)可視區(qū)域就是至少 scroll bar 要出現(xiàn)，如果瀏覽器已經(jīng)在畫(huà)面上顯示出兩者且沒(méi)得捲就沒(méi)有效果。因此我們需要在連結(jié)和錨點(diǎn)之間補(bǔ)上一些內(nèi)容。

兩種方式

由於 Smooth Scrolling API 有兩種，一種是 CSS, 一種則是 Javascript。也因此造成混亂的原因是部分瀏覽器有支援上不一致。

CSS 的方式非常簡(jiǎn)單，只要在該元素設(shè)定 scroll-behavior: smooth;

body {
  scroll-behavior: smooth;
}

注意是 behavior 而不是 behaviour

這個(gè)方式非常方便不過(guò)目前只有 Firefox 支援，查閱 Can I Use。

Javascript

然後是 Javascript 的方式

var anchor = document.querySelector("a[href="#dest"]")
var target = document.getElementById("dest")
anchor.addEventListener("click", function (e) {
  if (window.scrollTo) {
    e.preventDefault()
    window.scrollTo({"behavior": "smooth", "top": target.offsetTop})
  }
})

注意到 window.scrollTo 跟現(xiàn)有的 Javascript 在參數(shù)上有些不同，如果你直接用在 Chrome 下，您就會(huì)出現(xiàn)參數(shù)數(shù)量不對(duì)的錯(cuò)誤，所以實(shí)務(wù)上要應(yīng)用還是需要額外做些處理。

另外這種方式有一個(gè)缺點(diǎn)，那就是我們不能自訂 timing function。

延伸

上面的 script 已經(jīng)可以讓單一的錨點(diǎn)正常的運(yùn)作，不過(guò)這種方式有點(diǎn)面對(duì)大量連結(jié)的時(shí)候有點(diǎn)麻煩。假如我們?cè)谶@個(gè)頁(yè)面有幾個(gè)錨點(diǎn)都要這功能，那麼我們可以簡(jiǎn)單的實(shí)作如下。

var applyScrolling = function (arr, cb) {
  for (var i = 0; i < arr.length; i++) {
    cb.call(null, i, arr[i])
  }
}

// 注意如果有使用 router 那麼自訂一個(gè) class 可以避免一些問(wèn)題
var anchors = document.querySelectorAll("a[href^="#"]")
if (window.scrollTo) {
  applyScrolling(anchors, function (index, el) {
    var target = document.getElementById(el.getAttribute("href").substring(1))

    el.addEventListener("click", function (e) {
      console.log(target)
      e.preventDefault()
      // 這邊跟新的 method 參數(shù)是不同的。
      window.scrollTo(0, target.offsetTop)
    })
  })
}

譯者小結(jié)

目前在 Firefox 下兩種方式都可以使用，而 Chrome 則需要額外的開(kāi)啟設(shè)定。本文就是先記錄一下這些新的屬性與 API。

參考

Smooth Page Scroll in 5 Lines of JavaScript