資訊專欄INFORMATION COLUMN
摘要：默認(rèn)值為，表示立刻滾到底即表示平滑滾動(dòng)。這時(shí)對(duì)錨點(diǎn)內(nèi)鏈觸發(fā)的視口滾動(dòng)同樣有效。它接受兩種形式的值布爾值或?qū)ο?。接受布爾值主要還是為了兼容不支持平滑滾動(dòng)老版的瀏覽器。表示行內(nèi)元素排列方向要滾動(dòng)到的位置。
經(jīng)常有這樣的需求：點(diǎn)擊一個(gè)鏈接（內(nèi)鏈）跳轉(zhuǎn)到當(dāng)前頁面中間某個(gè)部分。對(duì)于這樣的需求，很容易想到使用錨點(diǎn)實(shí)現(xiàn)。但有一個(gè)問題：滾動(dòng)一步到位，太生硬了。
我還是比較喜歡平滑滾動(dòng)。HTML5 中提供了 CSS 屬性 scroll-behavior 并且修改了一系列滾動(dòng)函數(shù)的可接受參數(shù)用于支持平滑滾動(dòng)特性。
scroll-behavior這個(gè) CSS 屬性就只接受兩個(gè)自定義值：auto 和 smooth。默認(rèn)值為 auto，表示立刻滾到底；smooth 即表示平滑滾動(dòng)。這個(gè)屬性會(huì)影響滾動(dòng)函數(shù) scrollTo、scrollIntoView 等的默認(rèn)滾動(dòng)行為，也會(huì)影響 scrollTop、scrollLeft 等 DOM 屬性改變時(shí)的滾動(dòng)行為。如果 scroll-behavior 被設(shè)置在根元素（）上，表示應(yīng)用在視口（viewport）上。這時(shí)對(duì)錨點(diǎn)、內(nèi)鏈觸發(fā)的視口滾動(dòng)同樣有效。
所以只需要給 html 元素設(shè)置樣式 scroll-behavior: smooth 點(diǎn)擊內(nèi)鏈就會(huì)觸發(fā)頁面的平滑滾動(dòng)，很簡(jiǎn)單吧。
scrollIntoView上面說到：scroll-behavior 是指定滾動(dòng)函數(shù)的默認(rèn)行為，這其中就包括 scrollIntoView。顧名思義：這個(gè)函數(shù)就是把某個(gè)元素滾動(dòng)到窗口的可見區(qū)域。
它接受兩種形式的值：布爾值或?qū)ο?。接受布爾值主要還是為了兼容不支持平滑滾動(dòng)（老版）的瀏覽器。我們這里只說對(duì)象值。
{
behavior: "auto" | "instant" | "smooth", // 默認(rèn) auto
block: "start" | "center" | "end" | "nearest", // 默認(rèn) center
inline: "start" | "center" | "end" | "nearest", // 默認(rèn) nearest
}
對(duì)象可以有三個(gè)參數(shù)。
behavior 表示滾動(dòng)方式。auto 表示使用當(dāng)前元素的 scroll-behavior 樣式。instant 和 smooth 表示 直接滾到底 和 使用平滑滾動(dòng)。
block 表示塊級(jí)元素排列方向要滾動(dòng)到的位置。對(duì)于默認(rèn)的 writing-mode: horizontal-tb 來說，就是豎直方向。start 表示將視口的頂部和元素頂部對(duì)齊；center 表示將視口的中間和元素的中間對(duì)齊；end 表示將視口的底部和元素底部對(duì)齊；nearest 表示就近對(duì)齊。
inline 表示行內(nèi)元素排列方向要滾動(dòng)到的位置。對(duì)于默認(rèn)的 writing-mode: horizontal-tb 來說，就是水平方向。其值與 block 類似。
示例https://codepen.io/CarterLi/p...
可惜的是，目前瀏覽器支持度欠佳。而 scroll-behavior 作為一個(gè) CSS 屬性，不能被 polyfill。scrollIntoView 作為一個(gè) JavaScript 函數(shù)對(duì) polyfill 很友好。在目前的情況下，推薦使用 scrollIntoView 加 polyfill 的方式
完文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92487.html
摘要：在瀏覽器中，頁面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。 前言 在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...
摘要：在瀏覽器中，頁面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。 前言 在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...
摘要：如果做內(nèi)部系統(tǒng)，交互要求又不高，這個(gè)現(xiàn)在已經(jīng)是我的首選了，希望大家多多使用 前言 在處理頁面內(nèi)平滑滾動(dòng)我們使用的方案無外乎以下幾種 使用a標(biāo)簽的href屬性 使用location.href 使用第三方庫 關(guān)于1、2點(diǎn)，樓主寫了一個(gè)例子http://js.jirengu.com/qevud 缺陷 如果我們使用a標(biāo)簽的href屬性的話：其一是受限——只能在a標(biāo)簽上使用這一功能其二是...
摘要：左邊的邊欄線則是使用的來畫出來的，根據(jù)層級(jí)相應(yīng)做一些調(diào)整，輔以的的效果就可以呈現(xiàn)出不錯(cuò)的移動(dòng)效果。 這個(gè)插件根據(jù)選定的目錄內(nèi)容中的 h1, h2, h3, h4, h5, h6 標(biāo)簽來自動(dòng)生成目錄插入到選定的目錄容器中，并且提供一個(gè)漂亮的樣式效果 監(jiān)聽內(nèi)容區(qū)滾動(dòng) 點(diǎn)擊跳轉(zhuǎn)功能 兼容性：IE10+ (由于使用了 node.classList) 地址戳這里 github地址，歡迎sta...
摘要：如果為，元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊。根據(jù)可見區(qū)域最靠近元素的哪個(gè)邊緣，元素的頂部將與可見區(qū)域的頂部邊緣對(duì)準(zhǔn)，或者元素的底部邊緣將與可見區(qū)域的底部邊緣對(duì)準(zhǔn)。 [TOC] scrollIntoView系列 移動(dòng)web頁面，input獲取焦點(diǎn)彈出系統(tǒng)虛擬鍵盤時(shí)，偶爾會(huì)出現(xiàn)擋住input的情況，盡管概率不大，但是十分影響用戶體驗(yàn)。 scrollIntoView elemen...
閱讀 2444·2021-11-25 09:43
閱讀 1229·2021-09-07 10:16
閱讀 2651·2021-08-20 09:38
閱讀 2965·2019-08-30 15:55
閱讀 1511·2019-08-30 13:21
閱讀 915·2019-08-29 15:37
閱讀 1471·2019-08-27 10:56
閱讀 2112·2019-08-26 13:45
