整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「图」微软推荐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平台上,包括这项基于百分比的滚动方式。