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

article/2025/9/7 22:12:29

一、先介绍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.scrollHeightvar clientHeight = wrap.clientHeightvar scrollTop = wrap.scrollTopvar offsetTopWrap = wrap.offsetTopvar offsetTopb2 = b2.offsetTop// 点击定位到第九个盒子btn.onclick = function () {console.log('btn')var offsetTop9 = document.getElementById('b9').offsetTopwrap.scrollTo(0, offsetTop9)}function handleScroll() {scrollHeight = wrap.scrollHeightclientHeight = wrap.clientHeightscrollTop = wrap.scrollTopoffsetTopWrap = wrap.offsetTopoffsetTopb2 = b2.offsetTopconsole.log('scrollTop->', scrollTop)}console.log('clientHeight->', clientHeight)console.log('scrollHeight->', scrollHeight)console.log('offsetTopWrap->', offsetTopWrap)console.log('offsetTopb2->', offsetTopb2)}</script></body>
</html>