shipshapecode / shipshapecode/shepherd
Touch scroll not possible on highlighted area
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.8k
- Forks
- 658
- Avg merge
- 4d 5h
- Merged PRs (30d)
- 15
Description
It is not possible to scroll with touch on the highlighted area or on the modal. However touch scroll on the grayed area and mouse scroll is possible.
Reproduce
This can be tested on shepherdjs.dev:
- Open shepherdjs.dev on small mobile device or with dev-tools
- Click through the first two steps till you reach the
02. Examplesection - Try to touch scroll on the code snippet on the example (should not work)
- Try to touch scroll on the
01. How to includecode snippet (should work) - Try to scroll with mouse wheel (should work)
The default behavior of the touchmove event has been disabled here: https://github.com/shipshapecode/shepherd/blob/99d4f995f79d6bf99ea55c2bd0c62f309f2de968/src/js/components/shepherd-modal.svelte#L90-L92
https://github.com/shipshapecode/shepherd/blob/99d4f995f79d6bf99ea55c2bd0c62f309f2de968/src/js/components/shepherd-modal.svelte#L98-L107
Workaround
I'm currently using this workaround to avoid the call of preventDefault
const allowTouchmove = (event) => {
event.stopPropagation()
}
const tour = new Shepherd.Tour({
defaultStepOptions: {
when: {
show () {
const target = this.getTarget()
if (target) {
target.addEventListener('touchmove', allowTouchmove)
}
},
hide () {
const target = this.getTarget()
if (target) {
target.removeEventListener('touchmove', allowTouchmove)
}
}
}
}
})
Suggestion
IMO the preventDefault of the touchmove event should be at least avoidable through the step configuration (something like allowTouchScroll: true).
Also the behavior between mouse scroll, touch scroll on grayed area and touch scroll on highlighted area feels inconsistent and not understandable for a user.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/js/components/shepherd-modal.svelte at the referenced touchmove handlers and reproduce the issue on shepherdjs.dev with a small mobile viewport. Trace how the highlighted area and modal handle touchmove versus mouse scrolling, then verify that the reported touch-scrolling behavior is corrected or made configurable without breaking scrolling on the grayed area.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100