useScroll: cannot pass window to "getComputedStyle" as an element

[mu16zi]

Describe the bug

when I try to pass window to useInfiniteScroll as the element to track scroll on it, this issue occurs.

the error:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

I checked the source of error found that since the useInfiintieScroll passes the element to useScroll and the useScroll passes the element to getComputedStyle to get the desired element data, the error is occurs.
The getComputedStyle calls inside the setArrivedState function in the useScroll.

Reproduction

System Info

-

Used Package Manager

npm

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.

[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.

[steklopod]

I have the same error after nuxt ipgrade to 3.8.1:

const scrollBox = ref<HTMLDivElement>()

const { arrivedState } = useScroll(scrollBox) // <-- 👈🏻 This gives an error now

Before update everything was working

[wangliangxin]

I have the same error after nuxt ipgrade to 3.8.1:

const scrollBox = ref<HTMLDivElement>()

const { arrivedState } = useScroll(scrollBox) // <-- 👈🏻 This gives an error now

Before update everything was working

"I also encountered the same problem. How did you solve it?"

[mu16zi]

I have the same error after nuxt ipgrade to 3.8.1:

const scrollBox = ref<HTMLDivElement>()

const { arrivedState } = useScroll(scrollBox) // <-- 👈🏻 This gives an error now

Before update everything was working

"I also encountered the same problem. How did you solve it?"

If I'm not mistaken, I remember that I used document instead of window object as the element and that worked for my case,
but I though this issue was fixed after the pull request merged and I didn't test it after that.
upgrade your vueuse pkg and then check if the problem is fixed or not, Or Try to use document instead of window if you want to track scroll on it.

[steklopod]

I have the same error after nuxt ipgrade to 3.8.1:

const scrollBox = ref<HTMLDivElement>()

const { arrivedState } = useScroll(scrollBox) // <-- 👈🏻 This gives an error now

Before update everything was working

"I also encountered the same problem. How did you solve it?"

It's not solved yet because MR is not merged. Maybe let's ask @antfu to re-review: #3605

[steklopod]

I have the same error after nuxt ipgrade to 3.8.1:

const scrollBox = ref<HTMLDivElement>()

const { arrivedState } = useScroll(scrollBox) // <-- 👈🏻 This gives an error now

Before update everything was working

"I also encountered the same problem. How did you solve it?"

If I'm not mistaken, I remember that I used document instead of window object as the element and that worked for my case, but I though this issue was fixed after the pull request merged and I didn't test it after that. upgrade your vueuse pkg and then check if the problem is fixed or not, Or Try to use document instead of window if you want to track scroll on it.

The Scroll is on an HtmlElement. Not on window/document.

[Blackfaded]

Facing the same issue on a component which is a componentinstance. Would love to see the above PR merged