element.scrollWidthは、「element」に指定した要素のスクロールビューの幅を返すプロパティ。
構文
var $scrollWidth = $elementNodeReference.scrollWidth;
戻り値
指定した要素のスクロールビューの幅。単位は、ピクセル。
サンプル
id属性がsampleである要素のスクロールビューの幅：
サンプルの動作について
「getScrollWidth()」ボタンをクリックすると、「id属性がsampleである要素のスクロールビューの幅：」の右横に「510px」と表示する。
「510px」は、id属性が「sampleContent」である要素の幅「500px」と、id属性が「sample」である要素の左のpadding「10px」を足した数値。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getScrollWidth() {
var $elementNodeReference = document.getElementById( "sample" );
var $scrollWidth = $elementNodeReference.scrollWidth;
document.getElementById( "sampleOutput1" ).innerHTML = $scrollWidth + "px";
}
</script>
function getScrollWidth() {
var $elementNodeReference = document.getElementById( "sample" );
var $scrollWidth = $elementNodeReference.scrollWidth;
document.getElementById( "sampleOutput1" ).innerHTML = $scrollWidth + "px";
}
</script>
CSS
<style type="text/css">
#sample{
overflow: scroll;
height: 100px;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
#sampleContent{
width: 500px;
height: 300px;
background-color: yellow;
}
</style>
#sample{
overflow: scroll;
height: 100px;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
#sampleContent{
width: 500px;
height: 300px;
background-color: yellow;
}
</style>
HTML
<div id="sample">
<div id="sampleContent">
<button onclick="getScrollWidth();">getScrollWidth()</button>
<p>id属性がsampleである要素のスクロールビューの幅：<span id="sampleOutput1"></span></p>
</div>
</div>
<div id="sampleContent">
<button onclick="getScrollWidth();">getScrollWidth()</button>
<p>id属性がsampleである要素のスクロールビューの幅：<span id="sampleOutput1"></span></p>
</div>
</div>