js三大家族scroll、offset、client

枫落zz

于 2024-07-01 17:41:42 发布

阅读量265

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_56489674/article/details/140106230

版权

1.scroll

1.1 scrollHeight和scrollWidth

获取元素整个内容的高度和宽度（包含看不见的），如果有滚动条（滚动条会占用部分宽高），不计算滚动条的宽高。

整张网页的总高度可以从document.documentElement或document.body上读取。

// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight

1.2 scrollTop和scrollLeft

获取元素垂直和水平滚动条滚动的距离(被卷去的头部和左侧)

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。

document.documentElement.scrollLeft
document.documentElement.scrollTop

2.offset

2.1 offsetHeight和offsetWidth（只读）

获取盒子的高度宽度，包括内容区、内边距、边框（这里就是css设置的那些样式组合）

2.2 offsetLeft和offsetTop（只读）

当前元素和定位父元素之间的偏移量（如果没有设置定位父元素，就是相对于左上角的位置,top是距离顶部的距离,left是最左边的距离） offsetLeft水平偏移量 offsetTop垂直偏移量。

3.client

3.1 clientHeight和clientWidth(不包含滚动条)

元素的可见高度，包括元素的内容区和内边距的高度元素的可见宽度，包括元素的内容区和内边距的宽度.

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight.

// 视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight

3.2 clientLeft和ClientTop

边框宽度和边框的高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        margin: 0;
        padding: 100px;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div
      style="
        width: 200px;
        height: 200px;
        background-color: red;
        overflow: auto;
        border: 10px solid black;
      "
      id="div1"
    >
      hendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnal
    </div>
    <script>
      var div1 = document.getElementById("div1");
      console.log(div1.scrollHeight); //231
      console.log(div1.offsetHeight); //200
      console.log(div1.clientHeight); //183
      div1.addEventListener("scroll", function () {
        console.log(div1.scrollTop);
        console.log(div1.scrollLeft);
        console.log(div1.clientTop);
        console.log(div1.clientLeft);
        console.log(div1.offsetTop);
        console.log(div1.offsetLeft);
      });
    </script>
  </body>
</html>

枫落zz

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js三大家族scroll、offset、client

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。当前元素和定位父元素之间的偏移量（如果没有设置定位父元素，就是相对于左上角的位置,top是距离顶部的距离,left是最左边的距离） offsetLeft水平偏移量 offsetTop垂直偏移量。元素的可见高度，包括元素的内容区和内边距的高度元素的可见宽度，包括元素的内容区和内边距的宽度.
复制链接

扫一扫