Touch scroll not possible on highlighted area
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- javascript
- 領域
- frontend
調査の方向性
src/js/components/shepherd-modal.svelte の参照されている touchmove ハンドラーから始め、小さなモバイル viewport で shepherdjs.dev 上の問題を再現します。ハイライトされた領域とモーダルが、マウスによるスクロールと比較して touchmove をどのように処理するかを追跡し、報告されているタッチスクロールの動作が修正されるか設定可能になり、グレー表示された領域のスクロールを壊さないことを確認します。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- JavaScript
- スター
- 13.8k
- フォーク
- 658
- 平均マージ
- 7日 5時間
- マージ済み PR（30日）
- 18
環境構築
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
shipshapecode/shepherd のほかの issue
-
Docs: rendering framework components as step content, and why DOM injection belongs in when.showオープンdocumentation
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
shipshapecode/shepherd#3479 ·
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 52/100
shipshapecode/shepherd#3505 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 52/100
shipshapecode/shepherd#3484 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 52/100
shipshapecode/shepherd#3478 ·
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
shipshapecode/shepherd#3442 · コメント 1 件 · リアクション 2 件 ·
メンテナーはふだん 1 日以内に返信
shipshapecode/shepherd の issue をすべて見る
似ている issue
-
Complexity: Small P-Feature: Projects page ready for merge team role: back end/devOps role: front end size: 0.25pt
難易度 1/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 67/100
bellingcat/toolkit#905 ·
-
self-care self-care:docs-build-time-investigator
難易度 2/5 半日 初心者へのやさしさ 76/100
githubnext/gh-aw-cao#14191 ·
メンテナーはふだん 1 日以内に返信
-
effort:low impact:medium RAG status: auto-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
mastra-ai/mastra#25229 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
sugarlabs/musicblocks#8984 ·
メンテナーはふだん 1 日以内に返信