scrollWidthがclientWidthよりも小さくなる現象 [JavaScript]

JavaScriptでelement.clientWidthを使うと、要素の内容を表示する幅を取得することができます。また、element.scrollWidthでは要素の表示幅を超えた分までの値を取得することができます。

たとえば、横幅50pxの表示領域に”abc…xyz”の文字列を指定してみます。

<div id="text" style="width:50px; overflow:hidden;">abcdefghijklmnopqrstuvwxyz</div>

<script type="text/javascript">
    var element = document.getElementById("text");
    console.log(element.clientWidth); // 50
    console.log(element.scrollWidth); // 226
</script>

element.clientWidthは”50px”、element.scrollWidthは表示領域を超えた分を合わせた値(ここでは226px)が取得できています。

一方で要素の内容が表示領域の幅に収まるのであれば、scrollWidthはclientWidthと等しくなります。

<div id="text" style="width:50px; overflow:hidden;">abc</div>

<script type="text/javascript">
    var element = document.getElementById("text");
    console.log(element.clientWidth); // 50
    console.log(element.scrollWidth); // 50
</script>

なので、scrollWidthの値はclientWidth以上になるはずですが、ある条件ではscrollWidthがclientWidthよりも値が小さくなる場合があるのです。

幅指定が非整数の場合に発生しやすい?

確証はないのですが、どうやらwidthに非整数値を指定した場合にscrollWidth<clientWidthとなることがあるようです。

基本的にwidthは整数値で指定すると思いますが、例えばcalcを使って動的に幅を計算する場合は非整数値になることがあります。

試しにwidthに非整数値を指定してscrollWidthとclientWidthを取得してみます。

<div id="text" style="width:50.38294324329px; overflow:hidden;">abc</div>
<script type="text/javascript">
    var element = document.getElementById("text");
    console.log(element.clientWidth); // 50
    console.log(element.scrollWidth); // 50
</script>

要素幅が非整数の場合、clientWidthとscrollWidthはそれぞれ整数値に丸められます。

しかし、ブラウザのズーム倍率であったりディスプレイのサイズ設定などの関係で、scrollWidthが1pxぶん小さい値に丸められてしまうことがあります。

...
    console.log(element.clientWidth); // 50
    console.log(element.scrollWidth); // 49
...

私の環境では、ブラウザサイズが50%縮小された状態でこの現象が発生しました。整数値への丸めの方法に違いがあるのでしょうか?発生する条件はごく稀かもしれませんが、非整数値の扱いには気を付けたいものです。

Related Posts