一、先介绍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的概念
通过上面两张图可以发现,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>