stephenscaff
Cursor Does Not Follow Mouse When Dragging Scrollbar
When using the custom animated cursor, the cursor works as expected during normal mouse movement and drag events within the page. However, when dragging the browser's scrollbar, the custom cursor remains in place and does not follow the mouse. The native system cursor appears and tracks the scrollbar as expected, but the custom cursor does not update its position.
Expected Behavior:
The custom cursor should follow the mouse position even when dragging the scrollbar, or at least hide itself to avoid confusion.
Actual Behavior:
The custom cursor remains static and does not follow the mouse during scrollbar drag operations.
Environment:
- OS: Windows
- Browser: Chrome/Edge/Firefox (all tested)
- Custom Cursor Libraries:
react-animated-cursor,react-mouse-trail - Framework: Next.js
Additional Context:
This appears to be a browser limitation, as mouse events are not fired to the page while dragging the scrollbar. If there is a workaround or recommended UX pattern for this scenario, please advise.
Screenshots/GIF:
