HTML | DOM scrollWidth 属性

scrollWidth 属性返回一个元素的内容宽度，包括不可见部分的内容，但不包括边框、外边距或滚动条的宽度。

语法

element.scrollWidth

element 是要获取 scrollWidth 属性的元素。

返回值

返回 element 的内容宽度，单位为像素（px）。

示例

<style>
    #content {
        width: 100px;
        overflow: hidden;
    }
</style>

<div id="content">Some very long content that is hidden because of the overflow property.</div>

<script>
    const content = document.getElementById('content');
    console.log(`scrollWidth: ${content.scrollWidth}`);
</script>

在上面的示例中，元素 #content 的宽度设置为 100px，但实际上内容的宽度比 100px 更宽，因此设置了 overflow: hidden 属性以隐藏溢出的部分。console.log 语句输出 scrollWidth 属性值，即内容的实际宽度，这里输出结果将会是大于 100px 的值。

注意事项

• 对于普通元素，scrollWidth 属性值等同于 offsetWidth。但对于表格元素，offsetWidth 返回的是整个表格的宽度，而 scrollWidth 返回的是表格内容的宽度。
• 如果元素的 white-space 属性设置为 nowrap，即使元素内容很长，就算有滚动条，元素的 scrollWidth 值也仅会是元素自身的宽度。