画面いっぱいにDIVを重ねて、bodyにfocusさせ無いようにしたい。

Question

解決したいこと： ボタンを押すと画面いっぱいにDIV要素が描画され、その間,裏にあるbody,htmlのDOMが選択されたりスクロールされないようにしたい。(モバイル用WEB)

---

現在できていること：DIVをオーバーレイさせるところまではできたのですが、スクロールする際に裏にあるbodyタグもスクロールされてしまう。

---

調べたこと：

---

• 方法１：DIVがオーバレイしている間、body,html タグにフォーカスを外すスクリプトをバインドする。

$(body).focus(function(){
    $(this).blur();
});

• 結果：効果なし

---

• 方法2: DIVがオーバレイしている間、html,bodyタグに(height=100%,overflow=hidden)を適用する。
  • 結果： ページは固定されるのだが、iphoneでのタッチのスクロール（最後までスクロールしてバネのようにビヨーンと反動する）がまだあるので、操作上問題がある。

どなたか違う方法を教示していただけませんか。

Answer 1

スクロールをさせたい前面の要素をＡ、させたくない背面の要素をＢとして、以下のような記述でとめられないでしょうか。

$(document).ready(function(){
    $(Ｂ).on('mousewheel',htmlScrollPrevent);
});
function htmlScrollPrevent(e){
    var event = e.originalEvent,
        d = event.wheelDelta || -event.detail;
     if(d>0){
         $(Ａ).scrollTop($(Ａ).scrollTop()-30);
     }else{
         $(Ａ).scrollTop($(Ａ).scrollTop()+30);
     }
    this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
}

Answer 2

Bootsrap3だとオーバーレイで表示(ダイアログ表示)させてるとき、bodyに"modal-open"というクラスをつけています。
modal-openの中身は

.modal-open {
  overflow: hidden;
}

となっています。
同じ方法でどうでしょうか？

Comments

[NarugaL_ove]

方法２で同じことを試しましたが、解決しませんでした・・・

[dekaaki]

すみません。よく見てませんでした・・
確かに方法２で試してましたね。
お力になれずにすみません