翻译正在进行中。

Element.scrollWidth 是只读属性,表示元素内容的宽度,包括由于滚动而未显示在屏幕中内容
 

scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与clientWidth相同:它包含元素的内边距,但不包括边框,外边距或垂直滚动条(如果存在)。 它还可以包括伪元素的宽度,例如::before::after。 如果元素的内容可以适合而不需要水平滚动条,则其scrollWidth等于clientWidth

这个属性会进行四舍五入并返回整数,如果你需要小数形式的值,使用element.getBoundingClientRect().

语法

var xScrollWidth = element.scrollWidth;

xScrollWidth 的值是元素的内容宽度。

例子

<!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>

规范

The CSSOM View Module defines scrollWidth

参考资料

MSDN: scrollWidth Property

相关

文档标签和贡献者

标签: 
此页面的贡献者: JobbyM, silhouettesia, ChanShuYi, leeluolee, teoli, kuugua
最后编辑者: JobbyM,