JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍

最新推荐文章于 2024-06-28 17:10:12 发布

何以为皇

最新推荐文章于 2024-06-28 17:10:12 发布

阅读量3.6k

点赞数 2

分类专栏： js 文章标签： js html

本文链接：https://blog.csdn.net/qq_39352650/article/details/109255686

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、先介绍clientHeight与scrollHeight的区别

clientHeight：在页面上返回内容的可视高度（不包括边框，边距或滚动条）
scrollHeight：返回整个元素的高度（包括带滚动条的隐蔽的地方）

相关概念的介绍可以参考菜鸟教程：HTML DOM 元素对象

如果当前元素没有滚动条，那么clientHeight = scrollHeight
如果当前元素存在滚动条，那么scrollHeight就会大于clientHeight

二、再介绍scrollTop与offsetTop

scrollTop：返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
offsetTop：返回当前元素的相对垂直偏移位置

scrollTop只有在当前元素出现滚动条后才会大于0，通俗点说scrollTop就表示滚动条往下滚动的距离，单位是“px”
scrollHeight与scrollTop与clientHeight的关系如下：

// scrollHeight与scrollTop与clientHeight的关系如下：
scrollHeight = scrollTop + clientHeight

先看以下两张图来深入了解offsetTop的概念
当外层margin为0时的offsetTop
当外层margin为100时的offsetTop
通过上面两张图可以发现，offsetTop默认参照的都是当前页面的垂直偏移，Dom对象提供了一个属性offsetParent获取当前元素的偏移容器，通常情况下都是body对象

三、scrollTo方法

scrollTo是浏览器对象window的一个方法，该方法的用途是滚动页面元素到指定位置。
语法形式为： scrollTo(xpos,ypos)
在页面中添加了一个按钮，用来定位到第九个盒子去，那么可以获取当前第九个元素的offsetTop，然后在外层元素调用scrollTo()方法实现定位，具体代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #wrap {
        width: 300px;
        height: 600px;
        margin: 0 auto;
        border: 1px solid #000;
        overflow: auto;
      }
      .box {
        width: 200px;
        height: 300px;
        margin: 0 auto;
        background-color: rgb(222, 243, 208);
        border: 1px solid rgb(95, 97, 255);
      }
    </style>
  </head>
  <body>
    <header style="float: left">
      <button id="btn">跳转到第九个盒子</button>
    </header>
    <div id="wrap">
      <div class="box" id="b1">1</div>
      <div class="box" id="b2">2</div>
      <div class="box" id="b3">3</div>
      <div class="box" id="b4">4</div>
      <div class="box" id="b5">5</div>
      <div class="box" id="b6">6</div>
      <div class="box" id="b7">7</div>
      <div class="box" id="b8">8</div>
      <div class="box" id="b9">9</div>
      <div class="box" id="b2">10</div>
      <div class="box" id="b11">11</div>
      <div class="box" id="b12">12</div>
      <div class="box" id="b13">13</div>
    </div>

    <script>
      window.onload = function () {
        document.addEventListener('scroll', handleScroll, true)
        var wrap = document.getElementById('wrap')
        var b2 = document.getElementById('b2')
        var btn = document.getElementById('btn')
        var scrollHeight = wrap.scrollHeight
        var clientHeight = wrap.clientHeight
        var scrollTop = wrap.scrollTop
        var offsetTopWrap = wrap.offsetTop
        var offsetTopb2 = b2.offsetTop
        // 点击定位到第九个盒子
        btn.onclick = function () {
          console.log('btn')
          var offsetTop9 = document.getElementById('b9').offsetTop
          wrap.scrollTo(0, offsetTop9)
        }
        function handleScroll() {
          scrollHeight = wrap.scrollHeight
          clientHeight = wrap.clientHeight
          scrollTop = wrap.scrollTop
          offsetTopWrap = wrap.offsetTop
          offsetTopb2 = b2.offsetTop
          console.log('scrollTop->', scrollTop)
        }
        console.log('clientHeight->', clientHeight)
        console.log('scrollHeight->', scrollHeight)
        console.log('offsetTopWrap->', offsetTopWrap)
        console.log('offsetTopb2->', offsetTopb2)
      }
    </script>
  </body>
</html>