fix(useScroll): handle negative scroll values (#4613)

ilyaliao · eavlee · web-flow · commit 4b7ab552157b · 2025-03-05T03:58:19.000Z
Co-authored-by: eavlee &lt;eavlee@users.noreply.github.com&gt;
diff --git a/packages/core/useInfiniteScroll/index.md b/packages/core/useInfiniteScroll/index.md
@@ -50,6 +50,17 @@ function resetList() {
 </template>
 ```
 
+## Direction
+
+Different scroll directions require different CSS style settings:
+
+| Direction          | Required CSS                                          |
+| ------------------ | ----------------------------------------------------- |
+| `bottom` (default) | No special settings required                          |
+| `top`              | `display: flex;`<br>`flex-direction: column-reverse;` |
+| `left`             | `display: flex;`<br>`flex-direction: row-reverse;`    |
+| `right`            | `display: flex;`                                      |
+
 ::: warning
 Make sure to indicate when there is no more content to load with `canLoadMore`, otherwise `onLoadMore` will trigger as long as there is space for more content.
 :::
diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts
@@ -198,8 +198,8 @@ export function useScroll(
     directions.left = scrollLeft < internalX.value
     directions.right = scrollLeft > internalX.value
 
-    const left = (scrollLeft * directionMultipler) <= (offset.left || 0)
-    const right = (scrollLeft * directionMultipler)
+    const left = Math.abs(scrollLeft * directionMultipler) <= (offset.left || 0)
+    const right = Math.abs(scrollLeft * directionMultipler)
       + el.clientWidth >= el.scrollWidth
       - (offset.right || 0)
       - ARRIVED_STATE_THRESHOLD_PIXELS
@@ -223,8 +223,8 @@ export function useScroll(
 
     directions.top = scrollTop < internalY.value
     directions.bottom = scrollTop > internalY.value
-    const top = scrollTop <= (offset.top || 0)
-    const bottom = scrollTop
+    const top = Math.abs(scrollTop) <= (offset.top || 0)
+    const bottom = Math.abs(scrollTop)
       + el.clientHeight >= el.scrollHeight
       - (offset.bottom || 0)
       - ARRIVED_STATE_THRESHOLD_PIXELS
