微软如何改进 Microsoft Edge 的滚动效果？

　　微软 Microsoft Edge团队在博客分享了他们如何改进新版 Edge 的滚动效果，包括改进滚动动画和优化滚动体验(交互和外观)。在旧版 Edge 中，团队通过与操作系统Compositor (DirectComposition) 和输入 API(Direct Manipulation) 的紧密集成，实现了与 Windows 系统一致的平滑滚动效果(Smooth Scrolling)。

　　由于两者都是微软的产品，所以 Edge 团队在实现此效果上并没有太大的阻碍。

　　不过与操作系统紧密集成的弊端也显而易见 —— 难以将同样的体验移植到其他操作系统上，其中就包括旧版Windows系统。更糟糕的是，此方案虽然独立于浏览器主线程来处理输入和输出以提升响应速度，并提供了稳定的帧率，但这对于根据帧更新执行更新的脚本却效果不佳，从而导致出现抖动的情况，这也是当时团队收到的最常见反馈之一。

　　为此，在新版Microsoft Edge 中，团队从过去的经验中吸取教训，希望改进 Microsoft Edge 和所有基于 Chromium 的浏览器的滚动效果，并在最开始的时候就明确了一件事：仅仅把此前与 Windows 操作系统同样的依赖关系照搬过来是不可行的，因为 Microsoft Edge 和其他基于 Chromium 的浏览器在兼容性和跨平台要求上有很高的标准。

　　在此基础上，Edge 团队再考虑到用户反馈和技术方案，以及开源准则，他们决定先将精力最大程度地集中在优化滚动效果和提升性能上。

　　总结起来，Edge 团队对 Microsoft Edge 滚动效果的改进包括：

　　改进滚动动画曲线

　　使用基于百分比的滚动

　　引入滚动到底时的回弹效果

　　引入旧版本 Edge 的部分滚动效果

　　改进滚动动画曲线

　　改进后的动画曲线使得滚动速度的变化更自然，滚动时间稍微变长，让用户更能感受到动画效果。简单来说，这条曲线让通过鼠标滚轮、键盘或滚动条进行的滚动以及触控滚动都有了旧版Edge 中的顺滑效果。

　　Chromium 的部分上游变化：

　　Add Impulse-style scroll animations

　　Refactored ScrollOffsetAnimationCurve to facilitate new animations

　　Implement new Windows fling animation curve

　　Fling Animation Curve – Part 1

　　Fling Animation Curve – Part 2

　　使用基于百分比的滚动(Percent-based scrolling)

　　滑动滚动条时，Chromium 使用了固定的的滚动增量值(使用鼠标滚轮增加 100px，使用滚动条的点击按钮或键盘箭头增加 40px)。Edge 团队改变了这一行为，它采用旧版Edge 中的方案：通过滚动条高度来计算滚动增量值而不是，这样做的好处是当滚动条高度较小时，浏览器依然能提供合理的滚动范围以浏览内容。

　　Chromium 的部分上游变化：

　　Add percent-based scrolling for Windows

　　Add main thread percentage scrolling for keyboard and scrollbar

　　引入滚动到底时的回弹效果(Overscroll bounce)

　　Overscroll bounce 主要是向用户发出一个信号，告知他们已滚动至页面的底部或顶部，类似的效果也被称为橡皮筋特效或弹性滚动。Microsoft Edge 为任何方向的滚动都加入了此效果。

　　引入旧版Edge 的部分滚动效果

　　scroll chaining vs. scroll latching

　　scroll chaining 是旧版 Edge 使用的方案，它提供的效果是当子滚动条到达边界时，父滚动条会自动跟随滚动。

　　类似的场景，Chromium 已经有了 scroll latching 的概念，两者不同之处在于后者将所有的滚动操作集中到同一个滚动跳上。Edge 团队指出几乎所有用户都更喜欢 scroll chaining (97% 好评)，所以他们决定在Microsoft Edge 中使用scroll chaining，不过不打算将其引入 Chromium。

　　惯性滑动加速(Fling boosting)

　　此效果主要是提升快速滚动页面时的速度，同时整合了动画曲线。例如当用户希望快速拉至页面底部，fling boosting 不但提供了友好的动画效果，还加快了滚动速度。

　　微软希望 Microsoft Edge 不完全照搬EdgeHTML 的方案，而是结合 Chromium 和 EdgeHTML 的优点进行改进。为此，他们正在评估其他效果，并研究如何在即将到来的更新中应用这些改进，这些效果目前包括：

　　子滚动条中的回弹效果(overscroll effect)

　　缩放操作的回弹效果