Chromeで.htmlページを一定の幅に維持しようとすると、小さな問題が発生します。たとえば、ビューポート（右の単語？）の高さからオーバーフローするコンテンツがたくさんあるページ（1）があるため、垂直スクロールバーがあります。そのページ（1）ページ（2）では、同じレイアウト（メニュー、div、...など）を持っていますが、コンテンツが少ないため、垂直スクロールバーはありません。
問題は、ページ（1）ではスクロールバーが要素を少し左に押しているように見える（幅に追加されているか？）一方で、すべてがページ（2）の中央に表示されていることです。
私はまだHTML / CSS / JSの初心者ですが、これはそれほど難しいことではないと確信していますが、解決策を見つけることができませんでした。IE10とFireFox（干渉しないスクロールバー）では意図したとおりに機能しますが、これはChromeでのみ発生しました。
回答:
スクロールバーのサイズを取得してから、コンテナにマージンを適用できます。
このようなもの：
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}h-scrollbarを削除するためのCSS：
body{
overflow-x:hidden;
}これを見てみてください：http : //jsfiddle.net/NQAzt/
免責事項：オーバーレイは廃止されました。
どうしても必要な場合はこれを使用できますが、使用しないでください。
これはWebKitブラウザーでのみ機能しますが、私はとても気に入っています。auto他のブラウザと同じように動作します。
.yourContent{
overflow-y: overlay;
}これにより、スクロールバーはオーバーレイとしてのみ表示され、要素の幅には影響しません。
あなたがする必要があるすべては追加することです：
html {
overflow-y: scroll;
}あなたのCSSファイルでは、スクロールすることはできませんが、これが必要かどうかにかかわらずスクローラーがあります
これは、ビューポートの幅が両方で同じになることを意味します
恐らく
html {
width: 100vw;
}まさにあなたが欲しいものです。
calc()メインコンテンツビューの幅を決定するために 使用しているため、固定オフスクリーンナビゲーションがデスクトップの左側に表示され、ネイティブを維持できます。モバイルでスクロールします。
html、vws の幅をいじるのは少しやりにくいので、注意してください。
SafariやChromeなどのWebkitブラウザーは、幅を計算するときに、表示されるページの幅からスクロールバーの幅を差し引きます：100％または100vw。詳細については、DMラザフォードのスクロールとページ幅をご覧ください。
overflow-y: overlay代わりに使用してみてください。
追加できることがわかりました
::-webkit-scrollbar {
display: none;
}私のCSSに直接すると、スクロールバーが見えなくなりますが、それでもスクロールできます（少なくともChrome上で）。ページの邪魔なスクロールバーが不要な場合に適しています。
固定幅のコンテナーの場合、コンテナーを別のdivにラップし、同じ幅を両方のdivに適用することにより、純粋なCSSクロスブラウザーソリューションを実現できます。
#outer {
overflow-y: auto;
overflow-x: hidden;
/*
* width must be an absolute value otherwise the inner divs width must be set via
* javascript to the computed width of the parent container
*/
width: 200px;
}
#inner {
width: inherit;
}私の他の答えは現時点ではうまく機能していないようです（しかし、私はそれを操作できるようにしていきます）。
ただし、基本的には、コンテンツの幅を親のスクロール可能なペインの幅よりも少し小さく設定する必要があります。
そのため、スクロールバーが表示されても、コンテンツには影響しません。
この例はwidth、ブラウザにを介して実行させるのではなく、sをハードコーディングすることで、その目標を達成するためのよりハッキーな方法を示していpaddingます。
これが実行可能な場合、永続的なスクロールバーが必要ない場合は、これが最も簡単なソリューションです。
編集：この回答は現時点では正しくありません。ここで何をしようとしていたかを確認するには、他の回答を参照してください。私はそれを修正しようとしていますが、あなたが援助を提供することができるなら、コメントでそうしてください、ありがとう！
を使用padding-rightすると、スクロールバーの突然の外観が緩和されます
ドットからわかるように、テキストは、スクロールバーが存在するかどうかに関係なく、折り返す前にページ内の同じポイントに移動します。
これは、スクロールバーが導入されると、パディングがその後ろに隠れるため、スクロールバーがテキストを押し付けないためです。
.modal-dialog {
position: absolute;
left: calc(50vw - 300px);
}ここで、300 pxはダイアログウィンドウの幅の半分です。
これは実際に私のために働いた唯一のものです。
最初の回答にコメントを追加できず、久しぶりです...しかし、そのデモには問題があります：
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}b.prop（ 'scrollHeight'）は常にb.height（）と等しく、
私はそれがこのようになるはずだと思います：
if(b.prop('scrollHeight')>window.innerHeight) ...最後に私は方法をお勧めします：
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}