shipshapecode / shipshapecode/shepherd

Touch scroll not possible on highlighted area

Open
#1,717 5 comments 1 reaction 0 assignees View on GitHub

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:

  1. Open shepherdjs.dev on small mobile device or with dev-tools
  2. Click through the first two steps till you reach the 02. Example section
  3. Try to touch scroll on the code snippet on the example (should not work)
  4. Try to touch scroll on the 01. How to include code snippet (should work)
  5. 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

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.