scroll系列 - 爱码网

scroll系列—卷曲

scrollWidth :元素中内容的实际宽（没有边框），如果没有内容就是元素的宽
scrollHeight ：元素中内容的实际高（没有边框），如果没有内容就是元素的高
scrollLeft ：向左卷曲出去的距离
scrollTop ：向上卷出去的距离

简单例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 200px;
            border: 2px solid red;
            overflow: auto;
        }
        input{
            left: 330px;
            position: absolute;
            top:20px;
        }
    </style>
</head>
<body>
<div id="dv">
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
    娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~娃哈哈喜之郎旺仔牛奶~
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>

    my$("btn").onclick=function () {
      //console.log(my$("dv").scrollWidth);//元素中内容的实际的宽
      //console.log(my$("dv").scrollHeight);//元素中内容的实际的高
      console.log(my$("dv").scrollTop);//向上卷曲出去的距离
      console.log(my$("dv").scrollLeft);//向左卷曲出去的距离
    };
    
</script>

</body>
</html>

其效果如下：
scroll系列