fix(useScroll): add support for row-reverse and column-reverse (#2577)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useScroll/index.ts

@@ -165,12 +165,27 @@ export function useScroll(
       e.target === document ? (e.target as Document).documentElement : e.target
     ) as HTMLElement
 
+    const { display, flexDirection } = getComputedStyle(eventTarget)
+
     const scrollLeft = eventTarget.scrollLeft
     directions.left = scrollLeft < internalX.value
-    directions.right = scrollLeft > internalY.value
-    arrivedState.left = scrollLeft <= 0 + (offset.left || 0)
-    arrivedState.right
-      = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS
+    directions.right = scrollLeft > internalX.value
+
+    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0)
+    const right = Math.abs(scrollLeft)
+      + eventTarget.clientWidth >= eventTarget.scrollWidth
+      - (offset.right || 0)
+      - ARRIVED_STATE_THRESHOLD_PIXELS
+
+    if (display === 'flex' && flexDirection === 'row-reverse') {
+      arrivedState.left = right
+      arrivedState.right = left
+    }
+    else {
+      arrivedState.left = left
+      arrivedState.right = right
+    }
+
     internalX.value = scrollLeft
 
     let scrollTop = eventTarget.scrollTop
@@ -181,9 +196,25 @@ export function useScroll(
 
     directions.top = scrollTop < internalY.value
     directions.bottom = scrollTop > internalY.value
-    arrivedState.top = scrollTop <= 0 + (offset.top || 0)
-    arrivedState.bottom
-      = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS
+    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0)
+    const bottom = Math.abs(scrollTop)
+      + eventTarget.clientHeight >= eventTarget.scrollHeight
+      - (offset.bottom || 0)
+      - ARRIVED_STATE_THRESHOLD_PIXELS
+
+    /**
+     * reverse columns and rows behave exactly the other way around,
+     * bottom is treated as top and top is treated as the negative version of bottom
+     */
+    if (display === 'flex' && flexDirection === 'column-reverse') {
+      arrivedState.top = bottom
+      arrivedState.bottom = top
+    }
+    else {
+      arrivedState.top = top
+      arrivedState.bottom = bottom
+    }
+
     internalY.value = scrollTop
 
     isScrolling.value = true