整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
T之家12月9日消息 微軟對Chromium開源項目非常感興趣，因為該項目對Edge和Chrome都有利。微軟最新的功能請求之一就是希望通過部署Edge HTML風(fēng)格的滾動特性從而讓Chromium的滾動變得更加靈敏。
微軟打算將Impulse樣式（即EdgeHTML樣式）滾動動畫加入到Chromium中，微軟已經(jīng)將該滾動動畫移植到了基于Chromium的Edge瀏覽器的Dev Canary通道中。默認(rèn)情況下，Edge瀏覽器中啟用了脈沖樣式的滾動動畫。對于Chrome，該功能可能會在未來幾天內(nèi)出現(xiàn)在試驗版瀏覽器中。
微軟表示，Impulse-style (也就是EdgeHTML-style)滾動動畫將提供更靈敏的滾動體驗，用戶啟用后鼠標(biāo)滾輪的每個刻度都試圖模仿基于物理的內(nèi)容，內(nèi)容會開始快速移動然后逐漸變慢。換句話說，由于開始時的快速加速，該模式會給人一種更靈敏的感覺。
此外微軟還在推行另一項稱之為“percent-based scrolling”（基于百分比的滾動）的滾動方案，該模式允許瀏覽器將鼠標(biāo)滾輪或者鍵盤滾動解釋為預(yù)期滾動條的百分比。微軟目前正努力將經(jīng)典版Edge瀏覽器的優(yōu)秀特性移植到Chromium平臺上，包括這項基于百分比的滾動方式。
過去幾個月中，微軟進(jìn)一步展現(xiàn)了對Chromium開源項目的興趣和熱情，從而為Chrome、Edge以及其他基于該項目的瀏覽器做出各種貢獻(xiàn)。在最新提交的提案中，希望通過部署EdgeHTML風(fēng)格的滾動特性從而讓Chromium的滾動變得更加靈敏。
在最新提交的Commit中，微軟希望將Impulse-style (也就是EdgeHTML-style) 滾動動畫加入到Chromium瀏覽器中。微軟表示已經(jīng)將該滾動動畫移植到基于Chromium的Edge Dev和Canary通道版本中。
Impulse-style滾動動畫在Edge瀏覽器中默認(rèn)處于啟用狀態(tài)。對于Chrome用戶來說，在未來幾天可以通過啟用實驗性Flag進(jìn)行啟用。微軟表示Impulse-style滾動提供了更靈敏的滾動效果。鼠標(biāo)滾輪的每個刻度都試圖模仿實際物理滾動效果，頁面滾動會先快速移動然后慢慢停下來。
此外微軟正努力推薦另一項稱之為“percent-based scrolling”（基于百分比的滾動）的滾動特性，允許瀏覽器將鼠標(biāo)滾輪或者鍵盤滾動解釋為預(yù)期滾動條的百分比，這意味著在啟用該功能之后滾動體驗會更加流暢。微軟表示正努力將經(jīng)典版Edge瀏覽器的優(yōu)秀特性移植到Chromium平臺上，而基于百分比的滾動方式只是其中之一。
看個錨點定位的例子
發(fā)現(xiàn)頁面唰的一些就到頂部了，快到我們懵逼了。。。
開始解決
CSS屬性 scroll-behavior 為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產(chǎn)生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用于視窗。
scroll-behavior:smooth 寫在滾動容器元素上，可以讓容器的滾動變得平滑。
在網(wǎng)頁默認(rèn)滾動是在<html>標(biāo)簽上，移動端大多數(shù)在<body>標(biāo)簽上。
我們可以這樣加：
html,
body { scroll-behavior:smooth; }
加了以后的效果如下：
這是錄制的GIF圖，效果沒那么好。 大家可以動手試一下，滑動體驗非常不錯。
兼容性不夠好
當(dāng)然我們可以通過js來做個類似
DOM元素的scrollIntoView() 方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)，通過觸發(fā)滾動容器的定位實現(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
}
解釋一下這三個參數(shù)：
用法：
html:
<div class="wrap"> <div onClick="onScrollIntoView()">點擊讓黑色塊到頂部</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"});
}
效果：
這回大家再也不用害怕做錨點定位啦。
最后我們在說一個關(guān)于頁面滾動問題吧，那就是 返回頂部 功能實現(xiàn)
我們常用定時器 setInterval 來不斷減去高度。
如：當(dāng)前距離頂部 1000， 我們每10毫秒減50，
var timer = setInterval(function() { // 定時器 每10毫秒執(zhí)行一次
// 頂部距離 document.body.scrollTop = 1000
var speed = 50 // 返回頂部速度
document.body.scrollTop = document.body.scrollTop - speed
if (document.body.scrollTop === 0) { // 返回到達(dá)頂部后， 銷毀定時器
clearInterval(timer)
}
}, 10)
效果：
大家會發(fā)現(xiàn)，頁面返回是滾動起來很干。 沒10毫秒減50. 很平均，在交互上效果并不好。
借鑒上面 scroll-behavior:smooth 的交互效果。 緩動的返回頂部。
改一下計算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 這樣滑動起來是不是就平滑了呢？
換算成公式：開始位置 = 開始位置 + (結(jié)束位置 - 開始位置) / 速度
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()
}
調(diào)用：
var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
target.scrollTop = value
})
效果：
Ps: gif錄制效果不好，大家可以動手寫一下DEMO
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
