【React×Material-ui】Modalでスクロールできなくする

以前にMaterial-uiコンポーネントのモーダル（ポップアップ）を使ってみました。

Material-uiにはモーダル（ポップアップウインドウ）が用意されています。表示だけならサンプルで動きますが実装するにあたって色々考えたのでメモ。サンプル部分...

モーダルが出ている間は背景のスクロールは出来なくなっています。

しかしスマホで見ると後ろ画面がスクロールしてしまったのでその対策方法。

ModalのonRenderedでtouchmoveイベントを無効にする。

cancelScroll = (e)=>{
  e.preventDefault();
}
handleRender = ()=>{
  document.getElementById("ModalWrapper").addEventListener('touchmove', this.cancelScroll);
}
render() {
  return (
    <Modal id="ModalWrapper"
    ...
    onRendered={this.handleRender}>
      ...
    </Modal>
  );
}

cancelScroll = (e)=>{

e.preventDefault();

}

handleRender = ()=>{

document.getElementById("ModalWrapper").addEventListener('touchmove', this.cancelScroll);

}

render() {

return (

<Modal id="ModalWrapper"

...

onRendered={this.handleRender}>

...

</Modal>

);

}

モーダルは動的に作成されるため、作られた後に無効化する必要があります。

とりあえずこれで後ろの画面がスクロールされることはないです。

他の方法としてtouch-actionを設定してもいけます。

const styles = theme => ({
  paper: {
    ...
    touchAction:"none",
  },
});

const styles = theme => ({

paper: {

...

touchAction:"none",

});

イベントを停止させるわけではないので比較的安全といえるかもしれない。

階層ごとの設定も簡単なのでこちらの方がいいかもしれない。

元々PCブラウザだとtouchmoveイベントを起こしても背後のスクロールは起きない。

スマホだけで起きる現象だった。

それでもtouchmoveイベント対策をすると解決するのがよくわからないがブラウザ依存の問題なのかもしれない。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル