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