讓Chrome“滾”得更流暢：微軟推薦Edge HTML風(fēng)格滾動(dòng)特性

T之家12月9日消息微軟對(duì)Chromium開(kāi)源項(xiàng)目非常感興趣，因?yàn)樵擁?xiàng)目對(duì)Edge和Chrome都有利。微軟最新的功能請(qǐng)求之一就是希望通過(guò)部署Edge HTML風(fēng)格的滾動(dòng)特性從而讓Chromium的滾動(dòng)變得更加靈敏。

微軟打算將Impulse樣式（即EdgeHTML樣式）滾動(dòng)動(dòng)畫加入到Chromium中，微軟已經(jīng)將該滾動(dòng)動(dòng)畫移植到了基于Chromium的Edge瀏覽器的Dev Canary通道中。默認(rèn)情況下，Edge瀏覽器中啟用了脈沖樣式的滾動(dòng)動(dòng)畫。對(duì)于Chrome，該功能可能會(huì)在未來(lái)幾天內(nèi)出現(xiàn)在試驗(yàn)版瀏覽器中。

微軟表示，Impulse-style (也就是EdgeHTML-style)滾動(dòng)動(dòng)畫將提供更靈敏的滾動(dòng)體驗(yàn)，用戶啟用后鼠標(biāo)滾輪的每個(gè)刻度都試圖模仿基于物理的內(nèi)容，內(nèi)容會(huì)開(kāi)始快速移動(dòng)然后逐漸變慢。換句話說(shuō)，由于開(kāi)始時(shí)的快速加速，該模式會(huì)給人一種更靈敏的感覺(jué)。

此外微軟還在推行另一項(xiàng)稱之為“percent-based scrolling”（基于百分比的滾動(dòng)）的滾動(dòng)方案，該模式允許瀏覽器將鼠標(biāo)滾輪或者鍵盤滾動(dòng)解釋為預(yù)期滾動(dòng)條的百分比。微軟目前正努力將經(jīng)典版Edge瀏覽器的優(yōu)秀特性移植到Chromium平臺(tái)上，包括這項(xiàng)基于百分比的滾動(dòng)方式。

過(guò)去幾個(gè)月中，微軟進(jìn)一步展現(xiàn)了對(duì)Chromium開(kāi)源項(xiàng)目的興趣和熱情，從而為Chrome、Edge以及其他基于該項(xiàng)目的瀏覽器做出各種貢獻(xiàn)。在最新提交的提案中，希望通過(guò)部署EdgeHTML風(fēng)格的滾動(dòng)特性從而讓Chromium的滾動(dòng)變得更加靈敏。

在最新提交的Commit中，微軟希望將Impulse-style (也就是EdgeHTML-style) 滾動(dòng)動(dòng)畫加入到Chromium瀏覽器中。微軟表示已經(jīng)將該滾動(dòng)動(dòng)畫移植到基于Chromium的Edge Dev和Canary通道版本中。

Impulse-style滾動(dòng)動(dòng)畫在Edge瀏覽器中默認(rèn)處于啟用狀態(tài)。對(duì)于Chrome用戶來(lái)說(shuō)，在未來(lái)幾天可以通過(guò)啟用實(shí)驗(yàn)性Flag進(jìn)行啟用。微軟表示Impulse-style滾動(dòng)提供了更靈敏的滾動(dòng)效果。鼠標(biāo)滾輪的每個(gè)刻度都試圖模仿實(shí)際物理滾動(dòng)效果，頁(yè)面滾動(dòng)會(huì)先快速移動(dòng)然后慢慢停下來(lái)。

此外微軟正努力推薦另一項(xiàng)稱之為“percent-based scrolling”（基于百分比的滾動(dòng)）的滾動(dòng)特性，允許瀏覽器將鼠標(biāo)滾輪或者鍵盤滾動(dòng)解釋為預(yù)期滾動(dòng)條的百分比，這意味著在啟用該功能之后滾動(dòng)體驗(yàn)會(huì)更加流暢。微軟表示正努力將經(jīng)典版Edge瀏覽器的優(yōu)秀特性移植到Chromium平臺(tái)上，而基于百分比的滾動(dòng)方式只是其中之一。

看個(gè)錨點(diǎn)定位的例子

發(fā)現(xiàn)頁(yè)面唰的一些就到頂部了，快到我們懵逼了。。。

開(kāi)始解決

scroll-behavior

CSS屬性 scroll-behavior 為一個(gè)滾動(dòng)框指定滾動(dòng)行為，其他任何的滾動(dòng)，例如那些由于用戶行為而產(chǎn)生的滾動(dòng)，不受這個(gè)屬性的影響。在根元素中指定這個(gè)屬性時(shí)，它反而適用于視窗。

scroll-behavior:smooth 寫在滾動(dòng)容器元素上，可以讓容器的滾動(dòng)變得平滑。

在網(wǎng)頁(yè)默認(rèn)滾動(dòng)是在<html>標(biāo)簽上，移動(dòng)端大多數(shù)在<body>標(biāo)簽上。

我們可以這樣加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

這是錄制的GIF圖，效果沒(méi)那么好。大家可以動(dòng)手試一下，滑動(dòng)體驗(yàn)非常不錯(cuò)。

缺點(diǎn)

兼容性不夠好

當(dāng)然我們可以通過(guò)js來(lái)做個(gè)類似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)，通過(guò)觸發(fā)滾動(dòng)容器的定位實(shí)現(xiàn)。

DOM元素的scrollIntoView()方法是原生JS 兼容到IE6，兼容性非常好。

參數(shù)如下

{
 behavior: "auto" | "instant" | "smooth", // 默認(rèn) auto
 block: "start" | "center" | "end" | "nearest", // 默認(rèn) center
 inline: "start" | "center" | "end" | "nearest", // 默認(rèn) nearest
}

解釋一下這三個(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 來(lái)說(shuō)，就是豎直方向。start 表示將視口的頂部和元素頂部對(duì)齊；center 表示將視口的中間和元素的中間對(duì)齊；end 表示將視口的底部和元素底部對(duì)齊；nearest 表示就近對(duì)齊。
inline 表示行內(nèi)元素排列方向要滾動(dòng)到的位置。對(duì)于默認(rèn)的 writing-mode: horizontal-tb 來(lái)說(shuō)，就是水平方向。其值與 block 類似。

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">點(diǎn)擊讓黑色塊到頂部</div>
 <ul class="body">
 <li>1</li>
 <li>2</li>
 <li id="box">我是黑色</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>

js:

function onScrollIntoView () {
 var element = document.getElementById("box");
 element.scrollIntoView({behavior: "smooth"});
}

效果：

這回大家再也不用害怕做錨點(diǎn)定位啦。

最后我們?cè)谡f(shuō)一個(gè)關(guān)于頁(yè)面滾動(dòng)問(wèn)題吧，那就是 返回頂部 功能實(shí)現(xiàn)

返回頂部功能實(shí)現(xiàn)

我們常用定時(shí)器 setInterval 來(lái)不斷減去高度。

如：當(dāng)前距離頂部 1000，我們每10毫秒減50，

var timer = setInterval(function() { // 定時(shí)器 每10毫秒執(zhí)行一次
 // 頂部距離 document.body.scrollTop = 1000 
 var speed = 50 // 返回頂部速度 
 document.body.scrollTop = document.body.scrollTop - speed
 if (document.body.scrollTop === 0) { // 返回到達(dá)頂部后， 銷毀定時(shí)器
 clearInterval(timer)
 }
}, 10)

效果：

大家會(huì)發(fā)現(xiàn)，頁(yè)面返回是滾動(dòng)起來(lái)很干。沒(méi)10毫秒減50. 很平均，在交互上效果并不好。

借鑒上面 scroll-behavior:smooth 的交互效果。緩動(dòng)的返回頂部。

改一下計(jì)算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 這樣滑動(dòng)起來(lái)是不是就平滑了呢？

換算成公式：開(kāi)始位置 = 開(kāi)始位置 + (結(jié)束位置 - 開(kāi)始位置) / 速度

document.body.scrollTop = 1000 + (0 - 1000) / 2

公式太煩了還是上代碼吧：

var onTop = function (a, b, c, d) {
 if (a == b || typeof a != 'number') {
 return
 }
 b = b || 0
 c = c || 2
 
 var speed = function () {
 a = a + (b - b) / c
 
 if (a < 1) {
 d(b, true)
 return
 }
 d(a, false)
 requestAnimationFrame(speed)
 }
 speed()
}

a 開(kāi)始位置
b 結(jié)束位置
c 速度
d 位置回調(diào)，d(當(dāng)前的位置值, 否動(dòng)畫結(jié)束)

調(diào)用：

var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
 target.scrollTop = value
})

效果：

Ps: gif錄制效果不好，大家可以動(dòng)手寫一下DEMO

在線咨詢

上一篇：詳解HtmlTextView使用，在android上顯示web端html內(nèi)容
下一篇：四款安卓開(kāi)源電子書閱讀器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。