ScrollTrackingGroup
React component that detects if a 'Section' overlaps with a 'Window'
View on Github
React
TypeScript
About
This component is used in this very portfolio to highlight the current section in the top bar!
This component tracks the overlapping section within the window as the user scrolls through the children sections. It supports both horizontal and vertical scrolling and provides customizable options for window dimensions and offset.
Snippets
Here we use the 'useScrollPosition' hook to track the window's scroll position via 'currPos'. Depending on the component's 'orientation' property, we set the 'axis' and 'axisEnd' values accordingly to handle both vertical and horizontal scrolling.
Then we iterate through the sections and run 'doesOverlap' to check if the section overlaps with the window. If it does, it checks against the current 'topMost', and if it's higher, it becomes the 'topMost'.
Finally, we call 'setScrolledTo' with the section's ID and element ref.