bubbleで縦スクロールを禁止する方法

1.前提条件

・bubbleのtinderプラグインを使ってヌルヌル動くカードスワイプ画面を作りたい
・当方完全bubble専門でコードは書けない
・tinderプラグイン( Tinder Swiping Cards Plugin | Bubble )の動作で以下リンク( https://cardsstack.bubbleapps.io/tinder_swiping_cards?debug_mode=true )が実際のプラグインのサンプルページ
・ios端末において、後述するエラーが上記のサンプルページでも、自分で作ったアプリ上でも発生する

2.発生している問題

iosにおいて、左右スワイプ時に縦方向のスワイプが混じる(右上方向や左下方向など)ことでカードスワイプが固まり動作に不安定がある(Androidは問題ない)

3.エラーメッセージ

画面録画を添付します

上記のリンクが実際のiPhoneでの動作の録画です。
カードをドラッグしてスワイプができますが、エラーが起こらないように1枚目のカードは水平方向に丁寧にスワイプした後、2枚目のカードで縦方向が混ざったスワイプ(右上や左上、左下などの方向にスワイプ)をすると動画のように固まります。これを防止するため「そもそも論、縦スワイプを不可能にすればこのエラーは起こらないのでは?」と考えた次第です。

Android端末ではこのようなフリーズは起こりません。

4.実装したい機能

縦方向のスクロールが混じってもヌルヌル動く滑らかなスワイプを実現したい
→そのために、「iosにおいて縦スクロールを禁止にするjavascriptあるいはcss」を探している

何かヒントになることがあれば教えてください。

よろしくお願いします。

未検証ですが、
CSS側と、javascript 側で縦方向の禁止はできそうな気がします。

Bubbleでは、カスタムCSS
.tinder-card {
touch-action: pan-x;
}

How to Add css

みたいなCSSを入れるのはどうですかね?

「いいね!」 1

ありがとうございます!

後日検証して試行錯誤の結果を報告します!

「いいね!」 1