首页
学习
活动
专区
工具
TVP
发布

scroll

作者头像
贵哥的编程之路
发布2020-10-28 14:54:54
5260
发布2020-10-28 14:54:54
举报
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>57-JavaScript-scroll属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 50px solid #000;
            background: red;
            background-clip: content-box;
            color: deepskyblue;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="box">
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
</div>
<script>
    /*
    1.内容没有超出元素范围时
    scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
    scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
    */
    let oDiv = document.querySelector("div");
    console.log(oDiv.scrollWidth);//content的宽度加上文字的宽度
     console.log(oDiv.scrollHeight);//content的高度加上文字的高度
     
    /*
    2.内容超出元素范围时
    scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
    scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
    */

    /*
    3.scrollTop / scrollLeft
    scrollTop: 超出元素内边距顶部的距离
    scrollLeft: 超出元素内边距左边的距离
    */
    // console.log(oDiv.scrollTop);
    oDiv.onscroll = function () {//超出的部分的高度.
        console.log(oDiv.scrollTop);
    }
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档