Vertical to Horizontal Scrolling Conversion

"We need to translate vertical mouse/trackpad scrolling into horizontal scrolling within a specific web page container. The browser's default behavior is to scroll vertically, and we must override this. Additionally, embedded videos within the page tend to capture mouse events, causing scrolling issues when the mouse cursor is over them. We also need to display a vertical progress bar at the top of the page to indicate the horizontal scroll progress."

Technologies Used:

React/Next.js: For building the user interface and handling routing.
JavaScript: To capture and modify scroll events.
HTML/CSS: For page structure and styling.
React Hooks (useRouter, useRef, useEffect, useState): For managing component logic and state.
Key Challenges:

"Translating" vertical scroll events into horizontal scrolling using JavaScript.
Ensuring cross-browser compatibility due to variations in scroll event handling.
Preventing embedded videos from interfering with scroll events when the mouse is over them.
Adding a vertical progress bar that reflects the horizontal scrolling.
useRef is used to get the scrollable container reference.