「圖」微軟推薦EdgeHTML風格滾動特性：讓Chrome滾動更流暢

過去幾個月中，微軟進一步展現了對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平臺上，而基于百分比的滾動方式只是其中之一。

例1: 無縫連續滾動

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;

overflow: hidden; /* 防止滾動的圖片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我們在復制一套出來-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>

<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];

setInterval(function(){
    if(getStyle(ul,"left")===-1000){
    ul.style.left = "0px";//執行這一行代碼需要多長時間???
    }

    ul.style.left = getStyle(ul,"left") - 1 + "px";
},10)


function getStyle(obj,attr){
    if(window.getComputedStyle){
    return parseInt(window.getComputedStyle(obj)[attr]);
    }else{
    return parseInt(obj.currentStyle[attr]);
    }
}
</script>
</body>
</html>

圖片規格: 200px 130px

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平臺上，包括這項基于百分比的滾動方式。

在線咨詢

上一篇：網頁背景全屏就這？分享 1 段優質 CSS 代碼片段！
下一篇：機器學習論文呼吁“預注冊”，事先評審專治“注水研究”！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「圖」微軟推薦EdgeHTML風格滾動特性：讓Chrome滾動更流暢

您的項目需求