web-dev-qa-db-ja.com

スクロールバーなしでビューポート幅（vw）を計算することはできますか？

タイトルで述べたように、CSSのみでスクロールバーなしでvwを計算することは可能ですか？

たとえば、私の画面の幅は1920pxです。 vwは1920pxを返します。しかし、実際の体の幅は1903pxのようなものにすぎません。

Cssのみで1903px値を取得する方法はありますか（bodyの直接の子だけでなく）、またはこのためにJavaScriptが絶対に必要ですか？

cssviewport-units
50
Marten Zander

これを行う1つの方法は、calcを使用することです。私の知る限り、100％はスクロールバーを含む幅です。あなたがそうするなら：

body {
  width: calc(100vw - (100vw - 100%));
}

100vwからスクロールバーの幅を引いた値が得られます。

たとえば、ビューポートの50％（スコールバー幅の50％を除く）の正方形が必要な場合は、高さでもこれを行うことができます

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
72
Mattias Ottosson

仕様によれば、ビューポートの相対的な長さの単位はスクロールバーを考慮に入れていません（そして実際には、それらが存在しない）。

したがって、意図した動作が何であれ、これらのユニットを使用するときにスクロールバーを考慮することはできません。

4
Madara Uchiha

Webkitブラウザーはスクロールバーを除外しますが、他のブラウザーは返された幅にスクロールバーを含めます。もちろん、これは問題につながる可能性があります：たとえば、高さを動的に追加するajaxを使用してコンテンツを動的に生成した場合、Safariはページの視覚化中にレイアウトから別のものに切り替える可能性があります...気をつけてください。モバイルでは、問題が少ないため、スクロールバーは通常表示されません。

つまり、あなたの問題がすべてのブラウザでスクロールバーなしでビューポートの幅を正確に計算する場合、私の知る限り、良い方法はこれです：

width = $('body').innerWidth();

以前に設定したもの：

body {
    margin:0;
}
2
holden

「calc」でコードを台無しにすることなく動作することがわかった唯一の方法は、コンテナ要素のサイズを100vwにすることです。 overflow-xのコンテナーの周りにラッパーを追加します。これにより、スクロールバーがコンテンツ上にあるかのように、コンテナが全幅になります。

<!DOCTYPE html>
<html>
<head>
        <style type="text/css">
        html{ overflow-y: scroll; }
        html, body{ padding:0; margin: 0;}
        #wrapper{ overflow-x: hidden; }
        .row{ width: 100vw; }
        .row:after{ clear: both; content: ''; display: block; overflow: hidden; }
        .row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
        .row-right{ background: red; float: right; height: 40vh; width: 50vw; }
        </style>
</head>
<body>

<div id="wrapper">
<div class="row">
        <div class="row-left"></div>
        <div class="row-right"></div>
</div>
</div>


</body>
</html>
0
SequenceDigitale.com

これを行うには、ドキュメントが読み込まれたらCSS行を定義するjavascriptの行を追加します。

_document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
_

次に、CSSでvar(--scrollbar-width)を使用して、さまざまな幅のスクロールバーの有無にかかわらず、さまざまなブラウザに必要な調整を行うことができます。必要であれば、innerWidthをinnerHeightに、clientWidthをclientHeightに置き換えて、水平スクロールバーに対して同様のことができます。

0
user11990065

最も簡単な方法は、htmlとbodyを100vwに設定することです。

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

唯一の問題は、スクロールバーが表示されている場合、右端が少し切り取られることです。

0
gonnavis

overflow-yがvwに設定されている場合、autoユニットはoverflow-yスクロールバーを考慮しません。

overflow-y: scroll;に変更すると、vwユニットがスクロールバーのないビューポートになります。

考慮すべき唯一の欠点。コンテンツが画面に収まる場合、スクロールバーは表示されます。可能な解決策は、javascriptでautoからscrollに変更することです。

0
Ilario Engler