cdk virtual scroll emit scroll event after visual scroll

Reproduction:
https://stackblitz.com/edit/angular-7xvdmw?file=src%2Fapp%2Fcdk-virtual-scroll-context-example.ts

Steps to reproduce:
Put a breakpoint on the two different console.log (one in normal div and one in elementScrolled())
Try to scroll on the normal div and the one with virtual scroll

Actual Behavior
- The normal div will stop at the breakpoint when you try to scroll, there it no visual scrolling at this time. The visual scrolling is after the scroll event.
- The cdkScrollable emit the scroll event after the visual scrolling. Even I put a (scroll) in the html, I still got the event after the visual scroll.

The scroll event should emit before the visual scroll.

Environment
Angular: 10.0.0
CDK/Material: 10.0.0
Browser(s): chrome
Operating System (e.g. Windows, macOS, Ubuntu): windows

Start with the linked StackBlitz reproduction, especially src/app/cdk-virtual-scroll-context-example.ts, and compare the normal div's scroll handler with cdkScrollable.elementScrolled(). Reproduce the breakpoint ordering in Chrome, then trace the CDK virtual-scroll event path. Done means the scroll event is emitted before visual scrolling, with the reproduction demonstrating the corrected order.

Written by the indexing model from the issue text.