Nested scroll area impact on performance and accessibility

Posted

If you check Zattoo's Web Application, you might notice blazing-fast content scrolling, even discovering huge collections. This is the result of incremental improvements that we did step by step over the years, but one of these steps had a crucial impact on overall performance and accessibility.

TL;DR
Avoid nested scroll areas.

Small change, huge difference

We changed the layout and moved the scroll area from the nested element to the document body

Webpack and image assets

and received perceptually noticeable speed improvement.

Why body scroll works better

Browsers threat document and nested (custom) scrollable areas differently.

While the document scroll area is efficient and optimized, the sub-scroll areas suffering from continuous repaints on a scroll.

You can check it out by enabling repaint highlighting in a debugger.

Downsides of a nested scroll

FPS

Maybe it, not that noticeable with a small amount of DOM elements on the page, but when you operate with heave filled pages drop can be huge.

Accessibility

Moreover, if your main content area scrolled inside the nested node, you losing accessibility features, like keyboard navigation to start/end, screen by screen space jumps, overscroll, some native gestures, etc.

Scroll Choice

Prefer your body, and try to avoid nested scroll as much as possible, or at least try to have in mind when you prototyping interfaces.

The Web is not really forgetful when you are building it without rules.

References