Microsoft Microsoft Edge team bloggingshareHow they can improve the rolling effect of the new edge, including improving rolling animation and optimizing the rolling experience (interaction and appearance). In the old version of edge, the team achieved smooth scrolling consistent with the windows system through close integration with the operating system component (directcomposition) and input API (direct manipulation).

Because both are Microsoft's products, the Edge team is not too much hindrance in achieving this effect.

To that end, in the new version of the Microsoft Edge, the team learned lessons from past experience, wanted to improve the scrolling effect of Microsoft Edge and all Chromium -based browsers, and made it clear at the outset that it was not feasible to simply copy the same dependencies that had previously been associated with Windows operating systems because Microsoft Edge and other Chromium -based browsers had high standards of compatibility and cross-platform requirements.

On this basis, the edge team, considering user feedback and technical solutions, as well as open source guidelines, decided to focus on optimizing rolling effect and improving performance to the maximum extent.

To sum up, Edge team's improvements to Microsoft Edge rolling effects include:

• Improved scroll animation curve

• Use percentage based scrolling

• The springback effect when rolling to the bottom is introduced

• Introducing some scrolling effects of older versions of edge

Improved scroll animation curve

The improved animation curve makes the change of rolling speed more natural, and the rolling time slightly longer, so that users can feel the animation effect more. Simply put, this curve gives the smooth effect of the old edge to scrolling through the mouse wheel, keyboard or scroll bar, as well as touch scrolling.

Some upstream changes in 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

Use percentage-based rolling (Percent-based scrolling)

When sliding the scroll bar, chromium uses a fixed scroll increment value (use the mouse wheel to increase 100px, use the scroll bar's click button or keyboard arrow to increase 40px). The edge team changed this behavior by using the scheme in the old version of edge: calculating the scroll increment value through the height of the scroll bar instead of it. The advantage of this is that when the height of the scroll bar is small, the browser can still provide a reasonable scroll range to browse the content.

Some upstream changes in chromium:

• Add percent-based scrolling for Windows

• Add main thread percentage scrolling for keyboard and scrollbar

A springback effect when rolling to the bottom is introduced (Overscroll bounce)

Overscroll bounce mainly sends a signal to users that they have scrolled to the bottom or top of the page. Similar effects are also known as rubber band effects or elastic scrolling. Microsoft edge adds this effect to scrolling in any direction.

Introduce part scrolling effect of old version Edge

scroll chaining vs. scroll latching

Scroll chaining is a scheme used by the old version of edge, which provides the effect that when the child scroll bar reaches the boundary, the parent scroll bar will automatically follow the scroll.

In similar scenarios, chromium already has the concept of scrolling. The difference between the two is that the latter focuses all scrolling operations on the same scrolling jump. The edge team pointed out that almost all users prefer scroll chaining (97% favorable), so they decided to use scroll chaining in Microsoft edge, but did not plan to introduce it into chromium.

inertial sliding acceleration (Fling boosting)

This effect is mainly to improve the speed of fast page scrolling, while integrating the animation curve. For example, when users want to quickly pull to the bottom of the page, flying boosting not only provides friendly animation effects, but also speeds up the scrolling speed.

Microsoft hopes that Microsoft edge will not completely copy edgehtml's solution, but will improve it by combining the advantages of chromium and edgehtml. To do so, they are evaluating other effects and studying how to apply them in upcoming updates, which currently include:

1. Effect of springback in sub-rolling strip (overscroll effect)

2. Springback effect of zoom operation