Why does reading offsetTop / offsetHeight in a throttled scroll handler still trigger forced reflow?

I'm profiling scroll behavior in Chrome DevTools.

I have a scroll handler that is throttled. Inside the handler I calculate the scroll progress of the page and toggle some UI elements such as a "back to top" button.

The function reads several layout-related properties, including scrollTop, scrollHeight, offsetTop and offsetHeight.

Example:

function percent() { let scrollTop = document.documentElement.scrollTop || window.pageYOffset; let totalHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ) - document.documentElement.clientHeight; const el = document.getElementById("post-comment") || document.getElementById("footer"); if (el.offsetTop + el.offsetHeight / 2 < window.scrollY + document.documentElement.clientHeight) { document.querySelector("#nav-totop").classList.add("long"); } }

When profiling with the Chrome DevTools Performance panel, I see that this function is associated with a Layout task and DevTools indicates a forced reflow.

However, the scroll handler is already throttled.

My questions are:

Is it expected that reading layout properties like offsetTop, offsetHeight, or scrollHeight can still trigger forced reflow even when the scroll handler is throttled?

Is this considered normal for scroll-based UI logic such as scroll progress indicators?

Are there recommended patterns for implementing this type of logic while minimizing layout recalculation?ic while minimizing layout recalculation?