web-dev-qa-db-ja.com

スクロールバーがChromeのページの幅に加算されないようにします

Chromeで.htmlページを一定の幅に保とうとする小さな問題があります。たとえば、ビューポート（右ワード？）の高さを超えるコンテンツがたくさんあるページ（1）があるため、垂直スクロールバーがあります。そのページ（1）。 （2）ページでは、レイアウト（メニュー、divなど）は同じですが、コンテンツが少ないため、垂直スクロールバーはありません。

問題は、ページ（1）でスクロールバーが要素を少し左に押して（幅を追加しますか？）

私はまだHTML/CSS/JSの初心者であり、これはそれほど難しいことではないとかなり確信していますが、解決策を見つけることができませんでした。 IE10およびFireFox（非干渉スクロールバー）で意図したとおりに動作しますが、これはChromeでのみ発生します。

htmlcssgoogle-chromescrollbar
105
Acemad

スクロールバーのサイズを取得してから、コンテナにマージンを適用できます。

このようなもの：

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/

34
Lwyrn

免責事項：overlayは非推奨です。
絶対に必要な場合でも使用できますが、使用しないでください。

これはWebKitブラウザーでのみ機能しますですが、とても気に入っています。他のブラウザではautoのように動作します。

.yourContent{
   overflow-y: overlay;
}

これにより、スクロールバーはオーバーレイとしてのみ表示され、要素のwidthには影響しません！

95
simonDos

あなたがする必要があるのは追加するだけです：

html {
    overflow-y: scroll;
}

あなたのCSSファイルでは、これは必要かどうかにかかわらずスクローラーを持っていますが、スクロールすることはできません

これは、ビューポートが両方に対して同じ幅を持つことを意味します

54
Hive7

SafariやChromeなどのWebkitブラウザーは、幅を計算するときに表示ページ幅からスクロールバー幅を差し引きます：100％または100vw。 DM Rutherfordのスクロールとページ幅 で詳しく説明しています。

代わりにoverflow-y: overlayを使用してみてください。

19
Kyle Dumovic

恐らく

html {
    width: 100vw;
}

まさにあなたが望むものです。

16
TranslucentCloud

追加できることがわかりました

::-webkit-scrollbar { 
display: none; 
}

私のCSSに直接接続すると、スクロールバーが非表示になりますが、スクロールできます（少なくともChrome）。ページに気を散らすスクロールバーが必要ない場合に適しています！

11
fuzzy_logic_77

固定幅のコンテナの場合、コンテナを別の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;
}

Codepen の例を見るにはここをクリック

3
Robbendebiene

私の他の答えは現時点ではまったくうまく機能していないようです（しかし、引き続き機能するように努めます）。

しかし、基本的にあなたがする必要があること、そしてそれが動的にしようとしていたことは、コンテンツの幅を親のスクロール可能なペインの幅よりわずかに小さく設定することです。
スクロールバーが表示されても、コンテンツには影響しません。

この の例 は、widthを使用してブラウザーに実行させるのではなく、paddingsをハードコーディングすることにより、その目標を達成するためのよりハックな方法を示しています。
これが実現可能な場合、永続的なスクロールバーが必要ない場合、これが最も簡単なソリューションです。

3
Hashbrown

EDIT：この答えは現時点では正しくありません。他の答えを参照して、ここで何をしようとしているかを確認してください。私はそれを修正しようとしていますが、コメントで支援を提供できる場合は、ありがとう！

padding-rightを使用すると、スクロールバーの突然の出現を軽減できます

例

chrome devtools showing padding unmoved

ドットからわかるように、テキストは、スクロールバーが存在するかどうかに関係なく、折り返す前にページ内の同じポイントに移動します。
これは、スクロールバーが導入されると、パディングがその背後に隠れるため、スクロールバーがテキストをプッシュしないためです！

1
Hashbrown
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

ここで、300 pxはダイアログウィンドウの幅の半分です。

これは実際に私のために働いた唯一のものです。

0
Piotr Siatkowski

最初の答えにコメントを追加することはできず、長い間続きました...しかし、そのデモには問題があります：

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;
}
0
jeremy

Chromeでも同じ問題が発生しました。スクロールバーが常に表示されている場合にのみ発生しました。 （一般的な設定にあります）モーダルがあり、モーダルを開いたときに気付きました...

body {
    padding-left: 15px;
}

ボディに追加されます。これを防ぐために、私は追加しました

body {
    padding-left: 0px !important;
}
0
NatD