介绍JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性

这篇文章为大家讲解的是JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight等属性

首先看一下下面的图看是否能明白（若不明白请看下文代码展示）：

说明：把图片和代码分开看，为了展示图片的直观性，图片上面演示js属性的div与代码中的不相符。

代码演示：
  css:

        *{
            margin: 0;
            padding: 0;
        }
        .father{
            margin: 50px auto;
            width: 1000px;
            height: 1500px;
            background-color: darkcyan;
            padding: 10px;
            border:10px solid salmon;
            position: relative;
        }
        #view{
            margin: 50px auto;
            width: 800px;
            height: 900px;
            background-color: lightpink;
            border: 10px solid skyblue;
            padding: 20px;
            font-size: 25px;
        }
        .test{
            background-color: paleturquoise;
            width: 1000px;
            border: 10px solid skyblue;
            padding: 10px;
        }

  HTML:

<div class="father">
    <div id="view">
        <div style="width: 500px;overflow: scroll;margin: 20px auto;height: 200px;">
            <div class="test">
                <p>Happy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New YearHappy New Year</p>
            </div>
        </div>
    </div>
</div>

一：
document.body.clientWidth;
document.body.clientHeight;
document.body.clientTop;
document.body.clientLeft;

    var oneWidth = document.getElementById("view").clientWidth;
    console.log("网页可见区域的宽"+oneWidth);//div的width+padding-width
    
    var oneHeight = document.getElementById("view").clientHeight;
    console.log("网页可见区域的高"+oneHeight);//div的height+padding-height
    
    var oneTop = document.getElementById("view").clientTop;
    console.log("clientTop-->"+oneTop);//div的border-top
    
    var oneLeft= document.getElementById("view").clientLeft;
    console.log("clientLeft-->"+oneLeft);//div的border-left

解释：id="view"的div宽度为800px,padding为20px所以clientWidth=width+ （padding-width），高度同理可得。clientTop为该div的上边框的高度，clientLeft为div左边框的宽度。
二：
document.body.offsetWidth (包括边线的宽);
document.body.offsetHeight (包括边线的宽);
document.body.offsetTop
document.body.offsetLeft

    var twoWidth = document.getElementById("view").offsetWidth;
    console.log("网页可见区域的宽包括边线的宽"+twoWidth);//div的width+border-width+padding-width
    
    var twoHeight = document.getElementById("view").offsetHeight;
    console.log("网页可见区域的高包括边线的高"+twoHeight);//div的height+border-height+padding-height
    
    var twoTop = document.getElementById("view").offsetTop;
    console.log("twoTop-->"+twoTop);
    
    var twoLeft = document.getElementById("view").offsetLeft;
    console.log("twoLeft-->"+twoLeft);

解释：div的offsetWidth=width+border-width+padding-width，高度同理。重点在于offsetTop，offsetTop：当前元素上边框边缘到最近的"已定位"父级上边框内边缘的距离。 如果父级都没有定位，则分别是到body顶部的距离。offsetLeft同理。看下图（此时父级已经定位）：

三、
document.body.scrollWidth;
document.body.scrollHeight;
document.body.scrollTop;
document.body.scrollLeft;

    var threeWidth = document.getElementsByClassName("test")[0].scrollWidth;
    console.log("网页正文全文宽"+threeWidth);
    
    var threeHeight = document.getElementsByClassName("test")[0].scrollHeight;
    console.log("网页正文全文高"+threeHeight);
    
    var threeTop = document.getElementsByClassName("test")[0].scrollTop;
    console.log("scrollTop-->"+threeTop);//内容层顶部 到 可视区域顶部的距离。
    
    var threeLeft = document.getElementsByClassName("test")[0].scrollLeft;
    console.log("scrollLeft-->"+threeLeft);//内容层左部 到 可视区域左部的距离。

解释：若正文内容没有超出div的可视区域外则scrollWidth的值=clientWidth的值，若超出则为正文内容的宽度包括div的宽和padding但不包括border,高度同理。
若正文元素不能被滚动，它的scrollTop将被设置为0，scrollTop这个属性在滑轮事件中用的比较多。