useScroll - arrivedState.top bug in iOS Safari

[Nathan7139]

Describe the bug

In iOS Safari, there's a bug where the scrollTop property can be manipulated by user interaction to be less than zero, causing unexpected behavior in the useScroll function. The current implementation is: https://github.com/vueuse/vueuse/blob/9f10ad06a4fd2b4e6325dc72a3d1e36a62b6c254/packages/core/useScroll/index.ts#L218 To fix this issue, I suggest:

const top = scrollTop <= (offset.top || 0) 

Reproduction

https://github.com/vueuse/vueuse/assets/144317846/b09078c5-85e7-4e34-b89a-627c183f34ca

System Info

System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M1
    Memory: 68.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
    pnpm: 8.7.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.3
    Safari Technology Preview: 17.4
  npmPackages:
    @vueuse/core: ^10.3.0 => 10.7.2 
    vue: ^3.3.4 => 3.3.4

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[yxiZo]

I have encountered this issue as well. When I need to create ceiling animations, it leads to animation stuttering in the iOS environment.