fix(useMouse): position won't be changed on page scroll when type is page, closes #2922

[CatsJuice]

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.

---

Description

When type is set to page (which is default), it's expected to update x, y when page is scrolled(related to issue #2922 ). I've added a scrollTarget option to enable scroll detection when type is page.

The mouse position of page should be updated when page scroll by recalculate the position in scrollTarget's scroll event callback.

Additional context

I wonder if the new option scrollTarget that I added is right. Maybe just add a scroll?: boolean will be better? Because the page type should related to window scroll event, and it's unnecessary to customize scrollTarget.

---

🤖 Generated by Copilot at b410832

Add scrollTarget option to useMouse hook to track mouse or touch position relative to the page. Update useMouse/index.ts to handle scroll events and adjust position accordingly.

🤖 Generated by Copilot at b410832

• Add scrollTarget option to UseMouseOptions interface to customize the element for scroll events (link)
• Declare _prevMouseEvent variable to store the last mouse or touch event on the target element (link)
• Assign event parameter to _prevMouseEvent in handler function for mousemove or touchmove events (link)
• Define scrollHandler function to update x and y reactive values based on _prevMouseEvent and window scroll position (link)
• Define scrollHandlerWrapper function to wrap scrollHandler with eventFilter option if provided (link)
• Add scroll event listener on scrollTarget element using useEventListener hook with scrollHandlerWrapper as callback (link)

[antfu]

This does not align with the actual implementation. We could say this is enabled by default when type is page, and is only effective on type page?

[CatsJuice]

I'm not pretty sure that adding a scrollTarget is appropriate. Since pageX and pageY may not change if the scrollTarget is not window, it may be better to replace it with scroll?: boolean, which defaults to true when type = "page".

When the scroll target is not a window but a custom element (e.g. #app) , user may need to customize extractors in order to get the mouse distance from the top coordinate.

In this case, there's a limit to what vueuse can handle, and it may only be able to cover the case where the scrollTarget is window and the type is page.

I'm more confused about the API design here, so I wonder if I can change the options to scroll?: boolean and only handle the case where the window is the scrollTarget.

[antfu]

Yes, I think scroll?: boolean makes sense

[CatsJuice]

When the user really needs to use reactive mouse position in a custom element with the help of useMouse, it won't be possible. If we use scrollTarget with a user-defined type extractor, we can achieve it, but it's a bit tricky for the user to implement.

In this situation, use useElementBounding and useMouse together can also resolve the problem(like the solution in this PR)

I'll change the option to scroll?: boolean first in current PR!

:)

[antfu]

Suggested change

	if (!_prevMouseEvent || !window || type !== 'page')
	if (!_prevMouseEvent || !window)

[CatsJuice]

@antfu By the way, I don't know why but when I pull the latest changes, it failed to run dev server.

I've found the reason but I'm not sure why and what happened as described in #3273