下記のようにドロワーメニュー表記時にbodyを固定するようにしたのですが、 固定はできたものの、クリックして固定された際にbodyがカクっと右下に少しずれます。

Question

下記のようにドロワーメニュー表記時にbodyを固定するようにしたのですが、
固定はできたものの、クリックして固定された際にbodyがカクっと右下に少しずれます。

body.sidr-open { overflow:hidden!important; }
はおそらくbodyタグからはみ出たものを隠すということですが、
なぜこれが当たるとかくっと画面がずれるのでしょうか？

また、固定されるのも理由がよくわかりません。

$(function(){
  // 下記をクリックすると実行される
  $('.modal-button-wrap, .js-drawermenu-wrap').on('click', function() {
    //メニューが出たり戻ったりする
    $('body').toggleClass('sidr-open');
    });
});



/*-- メニューを開いたときにコンテンツを固定 --*/
body.sidr-open { overflow:hidden!important; }

Answer 1

hiddenでスクロールバーが消えると思うので、その分ではないですか？

Comments

[退会済みユーザー]

上に固定しているバーは残っています。
それなのに右下にちょっと動き、終了時に戻ります。

[gin]

上に固定しているバーって何ですか？
「.sidr-open」が付与されても、付与されていないときと同様にスクロールは可能ということですか？

[gin]

開発ツールで「.sidr-open」の「overflow:hidden;」をオンオフしたらスクロールバーのありなしで動いたりしませんか？

[退会済みユーザー]

ありがとうございます。確かによーく見たら右側にスクロールバーがありそれがついたり消えたりしています。
これが消えた分ずれているのですね。
スクロールバーはbodyの外にあるので消えるということなのですね。
するともともと消しておくか消えないようにしないといけないということでしょうか？

また、先ほどiOSはoverflow:hidden;でスクロールを無効にできないという、記事を見つけたのですが、もしかしてこのやり方ではアイフォンでは全く通用しないのでしょうか？
http://qiita.com/mimoe/items/f5f668cebb697d073553

[gin]

どういう組み方をしているのか分かりませんが普通はbodyの中にスクロールバーがあります。
スクロールバーが消えるのでbodyのwidthがその分広がって中身が若干ずれてると思います。
あとiOSのスクロールがどうのってやつですが今まで効かなかったことは特にありません。
一度組んでみて効かなかったらまた質問を立てるといいと思います。たぶん普通に大丈夫と思うので。

[退会済みユーザー]

スクロールバーが消えた分bodyが広がってしまったようですが、もしかしてmainタグにつければそのようなことが起きないでしょうか？
それくらいしか思いつきません。

アイフォンでもこれで固定できるのですね。

[退会済みユーザー]

mainにつけたところずれの現象はなくなりましたが、その分後ろが完全に固定できずにスクロールをたくさんすると動いてしまいました。
実務でもこれくらいで許されますかね。
クライアントさん次第ですが、完全に固定しろと言われたらこれではだめです。

またスクロールバーはbodyタグについているのですね。

[gin]

私がやったのを一番新しいやつ見返してみたらposition:fixed;でモーダルの背景とか固定してました。
これはモバイルチェックしたのを覚えているのでこれなら一応確実です。
「モーダル fixed 背景固定」とかぐぐればいくつか出てくるので試してみては。

[退会済みユーザー]

http://blog.mismithportfolio.com/web/20150529scrollfixed

もちろんこのような情報は見ています。ここのサイトの一番最後にhiddenのことが書いてあったのでこちらを行ったということです。
position:fixed;をbodyとnavにつけたということですか？
せめてこのページのこれと一緒とくらい教えていただければ幸いです。
どの方法かわかりません。

[gin]

そのページの「jQueryでやる方法」が簡単でいいと思いますが。
あと特定のページを出さずぐぐればといったのは、やり方はいろいろあるので検索して好きな方法で実装すればスムーズだからです。

[退会済みユーザー]

ありがとうございます。
リンク先のjQueryでやる方法をやってみます。

[退会済みユーザー]

http://codepen.io/anon/pen/rWzEqy
のようになりました。

hiddenの時と同じでまたスクロールバーぶん動きます。
なぜか上固定しているheaderも消えるようになりました。
うまくいきません

[gin]

URL張るのであれば、もう少し確認できるレベルのを提示してください。

[退会済みユーザー]

codepenではスクロールファンクションが実行できないのでどうしようもないですが、
実行できるようにできるのですか？

[gin]

実行できなきゃできないと思います。
というか見た感じfixedの付け替えだけなのでfixedのときのCSSがちゃんとなってないんじゃないですか？

[退会済みユーザー]

http://blog.mismithportfolio.com/web/20150529scrollfixed
の「jQueryでやる方法」
を行ったところ、上に固定しているheaderのメニューバーが消えてしまう理由がわかりました。
人間の目には見えないですが、一度一番上に戻っているのでその際に、下記が実行されて、
fadeOut('slow');が実行されて隠れてしまっているということでした。

$(function(){
$('#js-fixed-box').hide().addClass('visible');
});

$(window).scroll(function(){
if($(window).scrollTop() > 400) {
//ゆっくり表記する為のfadein
$('#js-fixed-box').fadeIn('slow');
}else{
//ゆっくり隠す為のfadeout
$('#js-fixed-box').fadeOut('slow');
}
});
このような状態の場合は、一度上に行ってしまう、fixedをｂｏｄｙにつけるというやり方では無理でしょうか？

[gin]

よく分かりませんが、bodyと一緒に#js-fixed-boxにblockなりfixedなり指定すればいいように思えますがダメでした？

[退会済みユーザー]

.fixed {
overflow: hidden;
}

としたところ固定ができ、メニューバーも消えなくなりました。ただ横のスクロールバーが消えて、画面がずれる現象が残っています。
この問題は解決できないでしょうか？

[gin]

…。
どうしてもそれを使いたいのであれば、スクロールバーの幅を計算して出してbodyにpadding-rightで指定すればずれないかなと思います。

[退会済みユーザー]

.fixed {
position: fixed;
}
にしても同じ問題が起きますよ。
起きない方法なんてあるんですか？

[gin]

ありますよ。
そしてそれは試してから言っているんですよね？

[退会済みユーザー]

$(function(){
var state = false;
var scrollpos;
//「window.innerWidth」でスクロールバーを含んだ横幅を取得できます。「 $(window).outerWidth(true)」でmarginやpadding、borderを含み、スクロールバーの領域は含まない横幅を取得できます。これらの差分がスクロールバーの横幅になります。
var scrollsize = window.innerWidth - $(window).outerWidth(true);

$('.modal-button-wrap, .js-drawermenu-wrap').on('click', function(){
if(state == false) {
scrollpos = $(window).scrollTop();
$('body').addClass('fixed').css({'top': -scrollpos});
// $('body').addClass('is-drawer-show');
$('body').css('padding-right' , scrollsize);
state = true;
} else {
$('body').removeClass('fixed').css({'top': 0});
window.scrollTo( 0 , scrollpos );
state = false;
}
});

});

上記のようにｐａｄｄｉｎｇ：rightをつけたのですが全く何も変わりません。
記載に問題があるでしょうか？

[gin]

「box-sizing: border-box;」を指定してたりするんじゃないですか？

[退会済みユーザー]

しています。
paddingを含めて100%にbodyがなっているのですね。

[gin]

ですね。
そのときはbodyのwidthを100%-scrollbarとする感じです。
ちなみに今overflow:hidden;のやつでやってるんですよね？

position:fixed;？
こっちなら簡単でbodyにoverflow-y:scroll;つけておけばいいだけです。

[退会済みユーザー]

何度も大変恐縮ですが、やはりうまくいきません。

・
$(function(){
var state = false;
var scrollpos;
//「window.innerWidth」でスクロールバーを含んだ横幅を取得できます。「 $(window).outerWidth(true)」でmarginやpadding、borderを含み、スクロールバーの領域は含まない横幅を取得できます。これらの差分がスクロールバーの横幅になります。
var scrollsize = window.innerWidth - $(window).outerWidth(true);

$('.modal-button-wrap, .js-drawermenu-wrap').on('click', function(){
if(state == false) {
scrollpos = $(window).scrollTop();
$('body').addClass('fixed').css({'top': -scrollpos});
// $('body').addClass('is-drawer-show');
$('body').css('padding-right' , scrollsize);
state = true;
} else {
$('body').removeClass('fixed').css({'top': 0});
window.scrollTo( 0 , scrollpos );
state = false;
}
});

});

・
.fixed {
overflow: hidden;
box-sizing: content-box;
}

body {
box-sizing: content-box !important;
}

としてもやはりずれます。そして実行後に右に隙間が空きました。

[退会済みユーザー]

.fixed {
overflow-y:scroll;
position:fixed;
}

もやってみましたが、背景のbodyが変に拡大されます。
そして一番上に移動しているので、メニューが消えてしまいます。
・メニューバーJS
$(window).scroll(function(){
if($(window).scrollTop() > 400) {
//ゆっくり表記する為のfadein
$('#js-fixed-box').fadeIn('slow');
}else{
//ゆっくり隠す為のfadeout
$('#js-fixed-box').fadeOut('slow');
}
});
があるため一番上に移動するとメニューバーが消えているのだと思います。

[gin]

結局のところモノを見ていないので想像の範疇であることは分かってください。
JSはいったん置いておいて「.fixed」のスタイルをちゃんと書きましょう。

.fixed {
overflow-y:scroll;
position:fixed;
}
普通に考えてこれだけでbodyが拡大するとかはないですよね？
普通なことしか言えないので、この部分は何が原因かご自分で探して解決してください。
想像で回答するにも限界があるので。

あと前にも言いましたが、headerが消えるのであればfixedかけると同時にもう1度出す処理をすればいいのではないですか？

[退会済みユーザー]

一応できました。
ただドロワーメニュー表記時にpadding:right;分空白ができてしまいますが、
これくらいであれば、クライアントさんも何も言わないですかね。
非表示時にはちゃんと戻りますが、表記時だけ右にスクロールバー分の空白が空きます。
bodyのwidthを100%プラス、スクロールバーのwidthとすればOKですかね？

[gin]

paddingだと色なり画像なりは範囲内だと思うんですが…
まあ、backgroundが単色であるならhtml要素にbackground-colorをつけてごまかすとか…(やったことないけど)

[退会済みユーザー]

そうですよね。なぜスクロールバー分のフッターの背景やヒーロイメージに右側の隙間が空くのか謎です。