【スマホ】縦スクロール中は横フリック（横スワイプ）できる要素があっても無効化したい

Question

スマホのwebサイトでslick.jsを使用し、以下のようなページを作成しています。

↓以下ページの要素イメージ
ーーーーーーーーー
テキスト
テキスト
テキスト
テキスト
【画像①②③】（slick.jsで横スワイプして複数の画像がみれる）
テキスト
テキスト
テキスト
【画像④⑤⑥】（同様）
テキスト
テキスト
テキスト
ーーーーーーーーー

問題

テキストエリアは縦スクロールしか出来ないので問題ないが、画像エリアは横スワイプもできるため、縦にスクロールしようとしても横スワイプが効いてしまう事がある。

やりたいこと

縦スクロールが検知できたら、そのスクロールが終わるまで、横スワイプを無効にする。
イメージはこのサイトのような感じです。

Answer 1

スクロール開始時にスワイプを止めて（slick.jsにその機能が無かったら上に要素を置いてスワイプを無視させるとか）、スクロールの終了を検知して再開させてはいかがでしょう。

【JavaScriptでスクロール終了時に処理を実行する方法】
https://lab.syncer.jp/Web/JavaScript/Snippet/46/

Comments

[gogoackman3]

ありがとうございます。
縦スクロールの開始と終了を検知してその要素にdisabledを追加する感じですよね？やってみたいと思います。
※スワイプ出来ないようにするがよく分からなかったのですが、無効化で良いのかなと以下を確認して思いました。
http://www.tohoho-web.com/html/attr/disabled.htm