当前位置：首页 > news >正文

scroll、offset、client三大家族和getBoundingClientRect方法

news 来源：原创 2025/5/9 6:02:15

scroll、offset、client三大家族和getBoundingClientRect方法

1.offset(只能读,不能修改）
2.client(只能读,不能修改）
3.scroll滚动家族
4.getBoundingClientRect方法

1.offset(只能读,不能修改）

offsetParent:离当前元素最近的有定位的祖先元素
offsetLeft:当前元素的左边框到offsetParent元素的左边框的距离;
从父亲的padding开始算,父亲的border不算。也就是说offsetLeft不包含offsetParent元素左边框的宽度。
offsetTop:当前元素的上边框到offsetParent元素的上边框的距离;
从父亲的padding开始算,父亲的border不算。也就是说offsetTop不包含offsetParent元素上边框的宽度。
offsetWidth/offsetHeight:
如果当前元素的box-sizing属性是border-box时,offsetWidth/offsetHeight就是该元素的width和height。
如果当前元素的box-sizing属性是content-box时,offsetWidth/offsetHeight就是该元素的width、padding和border之和。

下面来看一个例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        background-color: blanchedalmond;
      }
      .root {
        width: 600px;
        height: 600px;
        position: relative;
        left: 100px;
        top: 100px;
        background-color: red;
      }
      .box {
        margin-left: 50px;
        //这里会发生嵌套元素外边距塌陷，但只是界面会受影响，对本示例无影响
        margin-top: 50px;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .small {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px solid green;
        background-color: hotpink;
        overflow-y: auto;
        //box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="box">
        <div class="small">
        </div>
      </div>
    </div>
  </body>
</html>

界面如下:
在这里插入图片描述

如上，有三个div。root是最大的div，box是中等的div，small是最小的div(有一个绿色边框)。我们下面来分析一下small这个小div的offsetParent、offsetHeight、offsetLeft分别是什么?

 <script>
      let element = document.querySelector(".small");
      //small的box-sizing属性是content-box时候,打印180(100+20*2+20*2);
      //small的box-sizing属性是border-box时候，打印100
      console.log(element.offsetHeight);
      console.log(element.offsetLeft); //50+10=60;
      console.log(element.offsetParent); //root元素
    </script>

2.client(只能读,不能修改）

clientWidth
width+paddingLeft+padingRight（不含边框）
clientHeight
width+paddingTop+padingBottom（不含边框）
clientLeft:左边框大小
clientTop:上边框大小

<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        background-color: blanchedalmond;
      }
      .root {
        width: 600px;
        height: 600px;
        position: relative;
        left: 100px;
        top: 100px;
        background-color: red;
      }
      .box {
        margin-left: 50px;
        //这里会发生嵌套元素外边距塌陷，但只是界面会受影响，对本示例无影响
        margin-top: 50px;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .small {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 16px solid green;
        background-color: hotpink;
        overflow-y: auto;
        /* box-sizing: border-box; */
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="box">
        <div class="small"></div>
      </div>
    </div>
    <script>
      let element = document.querySelector(".small");
      //small的box-sizing属性是content-box时候,打印140(100+20*2);
      //small的box-sizing属性是border-box时候，打印68(100-16*2)
      console.log(element.clientHeight); 
      console.log(element.clientLeft); //为16px 左border宽
    </script>
  </body>

3.scroll滚动家族

scrollWidth元素总宽度(包含由于溢出无法在网页上显示的区域，内容区和内边距，不含边框)
scrollHeight元素总高度(包含由于溢出无法在网页上显示的区域，内容区和内边距，不含边框)
scrollLeft（可读写）
表示当前元素的水平滚动条向右侧滚动的像素数量
scrollTop 元素上面被卷起的高度（可读写）
表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。

下面举一个例子:

  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        background-color: blanchedalmond;
      }
      .root {
        width: 600px;
        height: 600px;
        position: relative;
        left: 100px;
        top: 100px;
        background-color: red;
      }

      .box {
        margin-left: 50px;
        //这里会发生嵌套元素外边距塌陷，但只是界面会受影响，对本示例无影响
        margin-top: 50px;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }

      .small {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        padding: 20px;        
        border: 16px solid green;
        background-color: hotpink;        
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="box">
        <div class="small">
          <div style="height: 500px; width: 100%"></div>
        </div>
      </div>
    </div>
  </body>

界面如下:
在这里插入图片描述

如上，有三个div。root是最大的div，box是中等的div，small是有一个绿色边框的div,它内部有一个500px高度的div,所以会出现纵向滚动条。我们下面来分析一下下面的代码:

<script>
      let element = document.querySelector(".small");
      // 获取盒子的高度宽度，包括内容区、内边距、不包含边框（包含滚动高度）
      //500+20*2,打印540，其中20是padding,而不是border
      console.log(element.scrollHeight); 
      
      element.addEventListener("scroll", function () {
        console.log(element.scrollTop);
        //判断滚动条是否滚动到底了
        //clientHeight不包含边框
        if (
          element.scrollHeight - (element.clientHeight + element.scrollTop) <
          1
        ) {
          console.log("滚动条到底了");
        }
      });
    </script>

4.getBoundingClientRect方法

getBoundingClientRect()获取元素位置（全部为只读）。

x：元素左上角相对于视口的横坐标
y：元素左上角相对于视口的纵坐标
height：元素高度
width：元素宽度
left：元素左上角相对于视口的横坐标，与x属性相等
right：元素右边界相对于左边视口的横坐标（等于x + width）
top：元素顶部相对于视口的纵坐标，与y属性相等
bottom：元素底部相对于上边视口的纵坐标（等于y + height）

如下代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        background-color: blanchedalmond;
      }
      .root {
        width: 600px;
        height: 600px;
        position: relative;
        left: 100px;
        top: 100px;
        background-color: red;
      }
      .box {
        margin-left: 50px;
        margin-top: 50px;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .small {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 16px solid green;
        background-color: hotpink;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="box">
        <div class="small">
          <div style="height: 500px; width: 100%"></div>
        </div>
      </div>
    </div>
    <script>
      let element = document.querySelector(".small");
      //元素左上角相对于视口的横坐标  160
      console.log(element.getBoundingClientRect().x); 
      //元素左上角相对于视口的纵坐标  150
      console.log(element.getBoundingClientRect().y); 
      //small的box-sizing属性是content-box时候,打印172(100+20*2+16*2);
      //small的box-sizing属性是border-box时候，打印100
      console.log(element.getBoundingClientRect().height);
      //160,元素左上角相对于视口的横坐标，与`x`属性相等
      console.log(element.getBoundingClientRect().left); 
      //元素右边界相对于左边视口的横坐标（等于`x + width`）
      //small的box-sizing属性是content-box时候,打印332(160+172);
      //small的box-sizing属性是border-box时候，打印260(160+100)
      console.log(element.getBoundingClientRect().right); 
    </script>
  </body>
</html>