開いているダイアログ内のタッチスクロールのみ。全身を動かさないでください

Question

私はオーバーフロー：隠された体の中にモバイルウェブマップアプリケーションを持っています。身体の右側に部分的に隠れている地図の凡例と、身体の下部に部分的に隠れているメニューがあります。

コントロールの部分的に表示されている部分をクリックし、コントロールをスライドして表示させることを考えます。

ボトムメニューはボディよりも高く、y方向にスクロールする必要があります。

問題は、touchmoveイベントハンドラのデフォルトを無効にすることによってスクロールを防止できること、またはスクロールを有効にすることです。つまり、メニューをクリックするとショップ全体のアプリケーション全体が移動できるようになります。

アプリケーションは、ここではhttps://geolytix.net/mobilemap

私はGoogle Chromeのdevのツールにタッチスクロール動作をテストするための応答ビューを使用してアクセスすることができます。

凡例項目のスクロールを無効にしますが、下部の大きなメニュースライダーでスクロールを無効にすることはできません。

私は何を防ぐためにしようとしていると、ユーザーはただのようなので、画面からメニューをプッシュということである。

Answer 1

一つの方法は、あなたのCSSに追加することです

html, body {position: fixed;}

を使用して、スクロールの可能性を防止します。今

、あなたのメニューをスクロール可能にするには、次の行をあなたのCSSに

#sliderPanel {height: 100%;overflow-y: scroll;} 

を追加あなたは今、Y軸上のメニューをスクロールすることができます。