[useScroll] flex column-reverse and row-reverse

[OneLoneFox]

Describe the bug

useScroll behaves incorrectly when the scrolling element is a flexbox container with either direction: column-reverse or direction: row-reverse.

I encountered this issue while making a chat app which needed to use useInfiniteScroll, I noticed that whenever I set the scrolling element to column-reverse the callback would stop triggering, after digging for the source code I found that the issue came from the underlying useScroll function which does not handle those cases, turns out the element.scrollTop value is negative on reversed flex elements.

I will be submitting a PR to fix the issue.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mxmg7f?file=src/Repro.vue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 20.19 GB / 31.93 GB
  Binaries:
    Node: 16.14.2 - ~\AppData\Local\nvs\default\node.EXE
    Yarn: 1.22.18 - ~\AppData\Local\nvs\default\yarn.CMD
    npm: 8.5.0 - ~\AppData\Local\nvs\default\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vueuse/core: workspace:* => 9.9.0
    @vueuse/integrations: workspace:* => 9.9.0
    @vueuse/math: workspace:* => 9.9.0
    @vueuse/rxjs: workspace:* => 9.9.0
    @vueuse/shared: workspace:* => 9.9.0
    vue: ^3.2.41 => 3.2.41

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[OneLoneFox]

I would also like to point out another issue introduced in a previous PR #1996 where the "scrolling right" value was incorrectly set to check against the scrollY value which made it either always true or always false.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.