fix(ScrollControls): adjust horizontal scrolling on resize

- Add resize event listener when horizontal scrolling is enabled, and adjust leftScroll on resize to the correct value. Temporarily disable onScroll to prevent redundant updates and precision issues.
- Improve syntax formatting from the previous commit.

Author: Kayla Akyüz

src/web/ScrollControls.tsx

@@ -71,6 +71,7 @@ export function ScrollControls({
   const [fixed] = React.useState(() => document.createElement('div'))
   const target = gl.domElement.parentNode! as HTMLElement
   const scroll = React.useRef(0)
+  const disableScrollUpdate = React.useRef(false)
 
   const state = React.useMemo(() => {
     const state = {
@@ -170,6 +171,12 @@ export function ScrollControls({
       const onScroll = () => {
         // Prevent first scroll because it is indirectly caused by the one pixel offset
         if (!enabled || firstRun) return
+
+        if (disableScrollUpdate.current) {
+          disableScrollUpdate.current = false
+          return
+        }
+
         invalidate()
         current = el[horizontal ? 'scrollLeft' : 'scrollTop']
         scroll.current = current / scrollThreshold
@@ -194,29 +201,38 @@ export function ScrollControls({
       el.addEventListener('scroll', onScroll, { passive: true })
       requestAnimationFrame(() => (firstRun = false))
 
-      const onWheel = e => {
+      const onResize = () => {
+        if (!el) return
+
+        const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight']
+
+        disableScrollUpdate.current = true
+        el.scrollLeft = state.offset * (scrollLength - el.clientWidth)
+      }
+
+      const onWheel = (e) => {
         if (horizontal) {
-          const previous = el.scrollLeft;
-          el.scrollLeft = el.scrollLeft += e.deltaY / 2;
-          if (infinite && previous === el.scrollLeft) {
-            onScroll();
+          const previous = el.scrollLeft
+          el.scrollLeft += e.deltaY / 2
+          if (infinite && previous == el.scrollLeft) {
+            onScroll()
           }
         } else if (infinite) {
           if (el.scrollTop <= 1 && e.deltaY < 0) {
-            onScroll();
-          } else if (
-            el.scrollTop >= el.scrollHeight - el.clientHeight - 1 &&
-            e.deltaY > 0
-          ) {
-            onScroll();
+            onScroll()
+          } else if (el.scrollTop >= el.scrollHeight - el.clientHeight - 1 && e.deltaY > 0) {
+            onScroll()
           }
         }
-      };
+      }
       if (horizontal || infinite) el.addEventListener('wheel', onWheel, { passive: true })
 
+      if (horizontal) window.addEventListener('resize', onResize)
+
       return () => {
         el.removeEventListener('scroll', onScroll)
         if (horizontal || infinite) el.removeEventListener('wheel', onWheel)
+        if (horizontal) window.removeEventListener('resize', onResize)
       }
     }
   }, [el, events, size, infinite, state, invalidate, horizontal, enabled])