web-dev-qa-db-ja.com

垂直スクロールバーは水平スクロールバーにつながります

私のCSSは次のようになります：

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

Divの高さと幅は自動的に調整されます。ただし、高さは最大値を固定しています。この値に達するとすぐに、垂直スクロールバーが表示されます。これはすべてかなりうねります。

今問題：
垂直スクロールバーが表示される場合、スクロールバーが配置されるため水平スペースの約10pxを使用しますinsidediv。
ただし、幅は自動スケーリングされていないため垂直スクロールバーによって使用されるこれらの追加の10数ピクセルが可能になります。垂直スクロールバーを追加する前の水平幅は、コンテンツに対して正確にちょうど良かったので（width:auto設定）、div now also水平スクロールバーを表示します-欠落している10ピクセルを許容します。これはばかげています。

  • これらの水平スクロールバーを避け、divの幅を自動スケーリングして垂直スクロールバーをフィットさせるにはどうすればよいですか？

可能であれば、水平スクロールを完全に無効にすることだけに頼らないソリューションを探しています。これは、ある時点（つまり、特定の入力）でおそらく必要になるためです。

cssscrollbarhorizontal-scrollingvertical-scrolling
29
fgysin reinstate Monica

私は機能しているが完璧にはほど遠い解決策を見つけました：

padding-right : 15pxをdivに追加して、div全体を自動的に拡大しました。これで、垂直スクロールバーが表示された場合、それらはパディング内に収まるので、水平幅は問題ありません。

残念ながら、パディングはもちろん垂直スクロールが必要ないときにも表示され、私のdivを必要以上にほんの少し広くします...：/まあ、私の目には、これはまだ不要な水平スクロールバーよりも望ましいです。

14
fgysin

かなり問題のない解決策を見つけました（少なくともこの問題の私のバージョンでは）。

width: autoの問題はwidth: 100vwと同様に動作することだと思います。問題は、垂直スクロールバーが表示されると、ビューポートの幅は同じままですが（〜10pxスクロールバーにもかかわらず）、表示可能領域（私がそれを呼んでいるように）は10px縮小されます。

どうやらpercentageによって幅を定義すると、この「可視領域」の観点から幅が定義されるため、コードを次のように変更します。

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}

コンテンツが適切に再スケーリングできるようにする必要があります！

pS代わりにoverflow-x: hiddenを追加して、水平スクロールバーの表示を停止することもできます。代わりに、垂直スクロールバーが表示されたときに、divの右側から約10pxを切り取ります。

11
Spencer

しばしば設定100vwが問題です。それを取り除くだけで、幅は100％になり、とにかく必要な幅になります。

0
bersling

私の問題についてGoogleで検索した結果のナンバー1（OPに似ていますが、同じではありません）。

一見不要な水平スクロールバーの一般的なシナリオは次のとおりです。

自動サイズ設定を使用する要素、たとえばテーブルがあります。自動サイズ調整が行われた場合beforeすべての行が追加されると、垂直スクロールバー用の十分なスペースが計算されません。サイズ変更後行を追加すると問題が解決しました-それでも、タイムアウトが必要でした

this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});
0
solbs

このバグ（Firefox固有）は、固定幅を設定していない場合でも発生します。

たとえば、フレキシブルラッパーdiv（overflow: auto;）内に垂直方向にスクロール可能なコンテナーdiv（display: inline-block;）がある場合、ウィンドウのサイズを変更すると、コンテンツがラップできるサイズよりも小さくなります。コンテナーのdivにスクロールバーが表示され、その後にのみ、柔軟なラッパーdivが拡大するか、最終的に2番目の水平スクロールバーがウィンドウに表示されます。

結果は役に立たない水平スクロールバーになり、垂直スクロールバーの幅だけをスクロールできます：

Screenshot of the example code showing the problem and a solution

この問題を取り除くには、この例のjavascript-codeを使用できます（FirefoxとChromiumでテスト済み）：

<!DOCTYPE html>
<html>
<body>
    <style type="text/css">
    .page {height: 200px;width: 400px;overflow: auto;background-color: #ccc;border: 5px solid #000;margin: 5px;}
    .wrapper {display: inline-block;min-width: 100%;margin: 20px;}
    .scroller {overflow: auto;max-height: 100px;background-color: #f00;}
    .content {min-height: 500px;min-width: 400px;background-color: #cfc;}
    </style>
    <div class="page">
        <div class="wrapper">
            <div class="scroller">
                <div class="content">
                    The wrapper-div should expand to fit the scroller content.
                    Reduce the browser window width, and a useless horizontal scrollbar appears.
                </div>
            </div>
        </div>
    </div>
    <div class="page">
        <div class="wrapper">
            <div class="scroller ensure-scrollbar-width-padding">
                <div class="content">
                    But with the javascript-function, this is now fixed.
                    There is no horizontal scrollbar in the wrapper-div.
                </div>
            </div>
        </div>
    </div>
    <script>
    var ensureScrollbarWidthPadding = function(elem)
    {
        if(!parseInt(elem.scrollWidth) || !parseInt(elem.clientWidth) || !parseInt(elem.offsetWidth))
        {
            return; // no browser-support for this trick
        }

        var update = function()
        {
            // reset to as if not having any right-padding
            elem.style.paddingRight = '0px';

            // check if horizontal scrollbar appeared only because of the vertical scrollbar
            if(elem.scrollWidth !== elem.clientWidth)
            {
                elem.style.paddingRight = (elem.offsetWidth - elem.clientWidth) + 'px';
            }
            else
            {
                elem.style.paddingRight = '0px';
            }
        };

        window.addEventListener('resize', update, false);
        window.addEventListener('load', update, false);

        update();

        return update;
    };

    (function()
    {
        var elems = document.getElementsByClassName('ensure-scrollbar-width-padding');
        for(var i=0;i<elems.length;++i)
        {
            ensureScrollbarWidthPadding(elems[i]);
        }
    })();
    </script>
</body>
</html>

Javascript関数EnsureScrollbarWidthPaddingは、垂直スクロール可能なコンテナに動的にpadding-rightを追加して、水平スクロールバーが表示されないようにします。

0
Yeti