Mobile scroll and event listener

Open
#236 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start by reading the related issue #229 and tracing the interactive Rive component's touch event listener and preventDefault behavior. Verify how scrolling behaves when touching canvas areas with and without triggers, and use the requested opt-in stop-scroll behavior as the completion criteria.

Written by the indexing model from the issue text.

Description

This is the same problem as https://github.com/rive-app/rive-react/issues/229

When you make a Rive component that is interactive it disables the ability to scroll
This is definitely because of a touch event listener combined with a preventDefault that stops it from scrolling

Ideal solution would be:
Instead of preventDefault when you touch the screen, maybe you can check if it is necesarry.
When touching an area in the canvas that has no triggers, just don't disable scroll.
And for the cases where this would be ideal, just add a stopScrollOnTouch: as prop

For now, I just disabled the event listeners and added my own events until this problem is fixed

Dominant language
TypeScript
Stars
1.2k
Forks
58
Avg merge
3h 23m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rive-app/rive-react

All issues in rive-app/rive-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.