[譯] scroll-behavior 滑順的捲動效果

james 發(fā)布于2019-08-30 13:04 / 3361人閱讀

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

眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。
為了使用體驗上的感覺有時候網(wǎng)站會設計一種平滑捲動到該位置的效果。

在過去這樣的效果通常會透過 jQuery 來達成，但有時候一些簡單的頁面為了達成這個功能就需要載入一堆函式庫或框架這未免有點矯枉過正。
最新的 Javascript 提供了一個更有效率，加強原生 window.scrollTo 的方式。

一個標準的錨點已經(jīng)是一個被廣泛使用的基本技巧: 透過這種方式就算新的 smooth scroll 滑順捲動的語法不被支援就的方法仍然會運作，就是跳到該位置。

Click to somewhere ...

This is the target

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

兩種方式

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

CSS 的方式非常簡單，只要在該元素設定 scroll-behavior: smooth;

body {
  scroll-behavior: smooth;
}

注意是 behavior 而不是 behaviour

這個方式非常方便不過目前只有 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 下，您就會出現(xiàn)參數(shù)數(shù)量不對的錯誤，所以實務上要應用還是需要額外做些處理。

另外這種方式有一個缺點，那就是我們不能自訂 timing function。

延伸

上面的 script 已經(jīng)可以讓單一的錨點正常的運作，不過這種方式有點面對大量連結(jié)的時候有點麻煩。假如我們在這個頁面有幾個錨點都要這功能，那麼我們可以簡單的實作如下。

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

// 注意如果有使用 router 那麼自訂一個 class 可以避免一些問題
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 則需要額外的開啟設定。本文就是先記錄一下這些新的屬性與 API。

參考

Smooth Page Scroll in 5 Lines of JavaScript

云服務器 GPU云服務器漂浮效果漂移效果切換效果閃動效果

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115289.html

[譯] scroll-behavior 滑順的捲動效果

摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網(wǎng)站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網(wǎng)站會設計一種平滑捲...

PiscesYE 2019-08-21 10:52 評論0 收藏0
[譯 + 補充]理解 DOM 座標

摘要：相對於座標在可視區(qū)的最左上角?；笞鶚送ǔＭ高^事件取得。再次強調(diào)不幸的是沒有屬性可以直接取得元素對應的座標。觸發(fā)事件的元素相對於父容器定位元素的座標，從開始計算。上個座標與當前的座標移動距離。座標系統(tǒng) 在瀏覽器中有兩種座標系統(tǒng) & 滑鼠座標： 1. 相對於 `document` - 座標 (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標 (0, 0) 在...

Lionad-Morotar 2019-08-21 15:09 評論0 收藏0
[譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事

摘要：接下來我們將會更具體的說明是什麼東西和這傢伙會怎麼解決這些問題，並且列出目前開發(fā)中一些令人興奮的功能。這個功能甚至還沒有一個瀏覽器支援。完整的清單請查閱目前還未被寫入規(guī)範，意思是這邊提到任何內(nèi)容極有可能會改變。譯者：其實...我想說這可能是最令我感到興奮..但又害怕頭痛的功能... 附上原文連結(jié) 你曾經(jīng)想要使用某個 CSS 的新功能，但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎...

bergwhite 2019-08-30 12:53 評論0 收藏0
完美實現(xiàn)一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數(shù)在標簽上，在我們想要實現(xiàn)平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發(fā)的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經(jīng)常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實現(xiàn)一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數(shù)在標簽上，在我們想要實現(xiàn)平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發(fā)的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經(jīng)常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0