让Chrome“滚”得更流畅：微软推荐Edge HTML风格滚动特性

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平台上，包括这项基于百分比的滚动方式。

页中添加滚动字幕效果

<!DOCTYPE html>

<html>

<head>

<title>滚动字体的设置</title>

</head>

<body>

var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象

var ctx = canvas1.getContext("2d") // 2.上下文对象（画笔）

ctx.shadowBlur = 10; // 阴影距离

ctx.shadowColor = "red" // 阴影颜色

ctx.shadowOffsetX = 30 // 阴影偏移

ctx.shadowOffsetY = 30 // 阴影偏移

ctx.font = "150px 楷体"

ctx.fillText("你好！", 20,150)

ctx.fillText("你好！", 20,350)

ctx.strokeText('你好！',23, 153)

ctx.strokeText('你好',23, 553)

canvas绘制文字

var x = 600

setInterval(function(){

if(x > -350){

//清空画布

ctx.clearRect(0,0,600,600)

ctx.strokeText('你好！',x, 153)

ctx.fillText("你好！", x,350)

ctx.font = "50px 宋体"

ctx.strokeText('每天学习一点点',x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>

lement.scrollIntoView()

直接上例子代码给大家一点参考:

<html>
  <style>
    span {
      display: block;
      height: 150%;
    } /*整点上下的空白 */
  </style>
  <body>
    <button id="from">点击我</button>
    <span></span>
    <div id="to">滚动到这:头条@plzbefat</div>
    <span></span>
  </body>
  <script>
    document.getElementById("from").addEventListener("click", () => {
      document.getElementById("to").scrollIntoView({
        behavior: "smooth", //顺滑的滚动
      });
    });
  </script>
</html>

整点例子没毛病

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滚动 元素在顶部
element.scrollIntoView(false); // 滚动 元素在底部
element.scrollIntoView(option); //参数

参数

alignToTop:

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。

在线咨询

上一篇：HTML5 参数传递
下一篇：第46节 HTML5扩展-Javascript-零点程序员

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

让Chrome“滚”得更流畅：微软推荐Edge HTML风格滚动特性

lement.scrollIntoView()

语法

参数

您的项目需求