整合营销服务商

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

免费咨询热线:

让Chrome“滚”得更流畅:微软推荐Edge HT

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

tml页面设置动态金额滚动效果!

一开始加载页面,数字都会过渡滚动到具体数字上!

代码:

html:

css:

js:

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"}