Element.scrollWidth

Element.scrollWidth は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。

scrollWidth の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は clientWidth と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには ::before または ::after のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 scrollWidthclientWidth と等しくなります。

このプロパティは値を整数値に丸めます。小数値が必要であれば、 element.getBoundingClientRect() を使用してください。

構文

var xScrollWidth = element.scrollWidth;

xScrollWidth はピクセル単位の element のコンテンツの幅です。

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        
        #aDiv {
            width: 100px;
        }
        
        button {
            margin-bottom: 2em;
        }
    </style>
</head>

<body>
    <div id="aDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="aButton">
        Check for overflow
    </button>
    
    <div id="anotherDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="anotherButton">
        Check for overflow
    </button>
</body>
<script>
    var buttonOne = document.getElementById('aButton'),
    buttonTwo = document.getElementById('anotherButton'),
    divOne = document.getElementById('aDiv'),
    divTwo = document.getElementById('anotherDiv');

    //check to determine if an overflow is happening
    function isOverflowing(element) {
        return (element.scrollWidth > element.offsetWidth);
    }

    function alertOverflow(element) {
        if (isOverflowing(element)) {
            alert('Contents are overflowing the container.');
        } else {
            alert('No overflows!');
        }
    }

    buttonOne.addEventListener('click', function() {
        alertOverflow(divOne);
    });

    buttonTwo.addEventListener('click', function() {
        alertOverflow(divTwo);
    });
</script>
</html>

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
Element.scrollWidth の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scrollWidthChrome 完全対応 43Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 5
補足
完全対応 5
補足
補足 In Internet Explorer 5 through 7, if padding is set, the value of scrollWidth is equal to the sum of the left and right padding. This behavior was fixed in Internet Explorer 8.
Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 43Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報