scrollIntoView 與平滑滾動

darkbug 發布于2019-08-22 13:49 / 1932人閱讀

摘要：默認值為，表示立刻滾到底即表示平滑滾動。這時對錨點內鏈觸發的視口滾動同樣有效。它接受兩種形式的值布爾值或對象。接受布爾值主要還是為了兼容不支持平滑滾動老版的瀏覽器。表示行內元素排列方向要滾動到的位置。

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

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

scroll-behavior

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

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

scrollIntoView

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

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

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

對象可以有三個參數。

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...

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

完

云服務器 GPU云服務器視圖平滑滾動 js平滑滾動 scrollIntoView 平滑過渡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92487.html

完美實現一個“回到頂部”

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

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

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

littlelightss 2019-08-23 12:36 評論0 收藏0
還在用錨點做頁面內滾動？scrollIntoView讓你一步到位！

摘要：如果做內部系統，交互要求又不高，這個現在已經是我的首選了，希望大家多多使用前言在處理頁面內平滑滾動我們使用的方案無外乎以下幾種使用a標簽的href屬性使用location.href 使用第三方庫關于1、2點，樓主寫了一個例子http://js.jirengu.com/qevud 缺陷如果我們使用a標簽的href屬性的話：其一是受限——只能在a標簽上使用這一功能其二是...

yzzz 2019-08-22 18:30 評論0 收藏0
一個騷氣的文章目錄自動生成器了解一下

摘要：左邊的邊欄線則是使用的來畫出來的，根據層級相應做一些調整，輔以的的效果就可以呈現出不錯的移動效果。這個插件根據選定的目錄內容中的 h1, h2, h3, h4, h5, h6 標簽來自動生成目錄插入到選定的目錄容器中，并且提供一個漂亮的樣式效果監聽內容區滾動點擊跳轉功能兼容性：IE10+ (由于使用了 node.classList) 地址戳這里 github地址，歡迎sta...

Cympros 2019-08-23 10:53 評論0 收藏0
scrollIntoView和scrollIntoViewIfNeeded

摘要：如果為，元素的底端將和其所在滾動區的可視區域的底端對齊。根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。 [TOC] scrollIntoView系列移動web頁面，input獲取焦點彈出系統虛擬鍵盤時，偶爾會出現擋住input的情況，盡管概率不大，但是十分影響用戶體驗。 scrollIntoView elemen...

godruoyi 2019-08-21 18:28 評論0 收藏0