NOTE: This page is a recollection of what I've written previously. I do not guarantee it's accuracy.
There are several ways to scroll a webpage: via touch/mousewheel events as handled by the page’s EventController
, partially platform-specific event handling code for the scrollbars, or by DOM methods called from JavaScript. However it’s down the scrollbars are updated, dirtied, and rerendered whilst the event is dispatched via the FrameTree
to the correct scrolled element for it to be updated and dirtied.
When a RenderNode
in the render tree (which the DOM is translated to for layout and display) is made scrollable, it notifies the FrameTree
so it can receive events. The RenderNode
s in turn render into a tree of RenderLayers
to help minimize how much effort has to go into determining what needs to be rendered, though it’s also useful for speeding up scrolling. Because when it receives a scroll event it simply moves it’s child layers into the correct place, and tracks their geometry so it can create a new RenderLayer
to fill the newly-opened gaps.