scroll系列

最新推荐文章于 2024-08-17 10:56:45 发布

Ctrl Alt Shift

最新推荐文章于 2024-08-17 10:56:45 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 前端

本文链接：https://blog.youkuaiyun.com/weixin_42676530/article/details/88735926

Web 前端专栏收录该内容

31 篇文章

订阅专栏

博客介绍了scroll系列的卷曲属性，包括scrollWidth（元素内容实际宽，无内容时为元素宽）、scrollHeight（元素内容实际高，无内容时为元素高）、scrollLeft（向左卷曲距离）和scrollTop（向上卷曲距离），还给出了简单例子。

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>

其效果如下：
在这里插入图片描述