I've taken a different approach for similar needs in the past... I have the current window size and scroll position in my state, and have windows events for resize/onscroll update said values... from there, I can have pure rendering that uses the values... Also, but centralizing the size/position values, I can have multiple components that handle their rendering as appropriate internally.<p><pre><code> window.addEventListener(
'resize',
()=>store.dispatch({
type: 'WINDOW_RESIZE'
})
);
window.addEventListener(
'scroll',
()=>store.dispatch({
type: 'WINDOW_SCROLL'
})
);
</code></pre>
NOTE: you should double-check your scroll position, as the scroll events continue to fire as you hit the edge of the viewport.