スマホで確認すると縦スクロール効かない

Question

実現したいこと

画像スライダー部分を
スマホタッチで縦スクロールできるようにする

前提

PCでは問題なく上下に動くのですが、スマホで確認すると上下に動かない

発生している問題・エラーメッセージ

**スマホで確認すると上下に動かないので動くようにしたいです**

試したこと

overflow:hiddenを確認

補足情報（FW/ツールのバージョンなど）

作成したサイトのコーディング内容に関しまして、お気づきの点や改善点などありましたら、
合わせてご教示いただけると幸いです。
お手数ですがよろしくお願いいたします。

Answer 1

スマートフォンでの縦スクロールがうまくいかない問題に対処するために、以下の手順を試してみてください。

スライダーのライブラリ（owl-carousel）のオプションを確認してください。touchDrag および mouseDrag オプションが true に設定されていることを確認してください。

例:

$('.home-slider.owl-carousel').owlCarousel({
    touchDrag: true,
    mouseDrag: true
});

もし、上記の設定がすでに正しく設定されている場合、CSSでスタイルを調整することができます。.owl-carousel クラスに touch-action プロパティを追加して、縦方向のスクロールを許可してください。

.owl-carousel {
    touch-action: pan-y;
}

これらの変更を加えた後、スマートフォンで再度テストして動作を確認してください。上記の方法でスクロールが改善されない場合は、他のCSSやJavaScriptの競合が原因である可能性があります。その場合は、個別に問題を特定して修正していく必要があります。

Comments

[1256497854]

ご回答ありがとうございます。調べたところどちらも設定されていたので原因の特定には至りませんでした。
アドバイスもありがとうございます。

[matsubokkuri]

残念です。神野が断片的だと思いますので、全体を載せた上で質問してくださると言う的確な回答ができると思います。

[1256497854]

とんでもございません。ご回答ありがとうございます。
こちらのサイトのスライダー部分が画面タッチで反応しなくて困ってます。
https://www.vieliss.tokyo/

[matsubokkuri]

CSSが結合されてしまっていて設計意図が汲み取れないのでトラブルシューティングが大変ですが、ブラックボックス的に見てみた感じでは、とりあえず以下の部分で、z-indexを-1にすると直ります。

```css
.owl-carousel.home-slider {
position: relative;
height: 750px;
z-index: -1;
}
```

副作用があるかもしれませんが。

[1256497854]

画面タッチ反応しました。本当に助かりました。

[1256497854]

何度も申し訳ありません。
スマホがsafariだと反応しないのですが、これの改善策はありますでしょうか？chomeは問題ありませんでした。