UI でドロワーメニューやダイアログボックスを最前面に表示する際、背面側となったドキュメント(body)のスクロールを一時停止したいことがある。
これまで知らなくて、JSでやや複雑な制御をおこなっていたんだけれど、
スクロールを止めたい要素(body)を、height: 100%; overflow: hidden; にしてあげれば、
それだけでよいことが分かった。
スクロール動作に復帰させるときは、htight: auto; overflow-y: auto; などとすればよい。
動作サンプル
https://jsfiddle.net/firstAudience/j09au54s/
JSの27行目あたり、下記の部分
stopRootScroll : function( bl ){
if( bl === true ) {
$body.css({
'overflow': 'hidden',
});
} else {
$body.css({
'overflow-y': 'scroll',
});
}
},