JS之DOM篇-scroll滚动

2023-10-11 11:06:04

前面两篇文章介绍了offset偏移和client客户区，本篇scroll滚动是元素尺寸相关文章的最后一篇

滚动宽高

scrollHeight

scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分

scrollWidth

scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

<style>
#test {
  width: 100px;
  height: 100px;
  background: teal;
  border: 5px solid red;
  padding: 10px 20px;
  margin: 10px 20px;
  overflow: scroll;
}
</style>
<div id="test">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
<script>
  console.log(test.scrollHeight) // 188
  // 123 = 20 + 100 + 20 - 17
  console.log(test.scrollWidth) // 123
</script>

页面尺寸

document.documentElement.scrollHeight表示html元素内容的实际高度，document.documentElement.scrollWidth表示html元素内容的实际宽度

<style>
html {
  width: 2000px;
  height: 2000px;
}
</style>
<script>
  console.log(document.documentElement.scrollHeight) // 2000
  console.log(document.documentElement.scrollWidth) // 2000
</script>

滚动长度和宽度

scrollTop

scrollTop属性表示被隐藏在内容区域上方的像素数(我个人喜欢把它叫做被卷去的头部)，元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

scrollLeft

scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度

<style>
#test {
  width: 100px;
  height: 100px;
  background: teal;
  border: 5px solid red;
  padding: 10px 20px;
  margin: 10px 20px;
  overflow: scroll;
}
</style>
<div id="test">文本文本文本文本文本文本文本文本文本文本文本文本</div>
<script>
  test.onscroll = function() {
    // 1 3 5 8 ...
    console.log(this.scrollTop)
  }
</script>

注意： scrollTop和scrollLeft都是可读写的，所以可以设置其值改变元素的位置

页面滚动

document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的，所以兼容写法如下

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var docScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

应用一：页面触底加载

var docScrollTop,docClientHeight;
// 实际开发中要做节流处理，这里仅作演示
window.onscroll = function() {
  docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  docClientHeight = document.documentElement.clientHeight;
  if(docScrollTop + docClientHeight >= document.documentElement.scrollHeight){
    // 到底了，执行加载逻辑
    console.log('loadData')
  }
}

应用二：返回顶部

<style>
  #btn {
   margin-top: 2000px;
  }
</style>
<button id="btn">backTop</button>
<script>
  btn.onclick = function() {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  }
</script>

另外window对象有两个只读属性也可以获取整个页面滚动的像素值，它们是pageXOffset和pageYOffset

pageXOffset

pageXOffset表示水平方向上页面滚动的像素值

pageYOffset

pageYOffset表示垂直方向上页面滚动的像素值

<style>
  html {
    width: 2000px;
    height: 2000px;
  }
</style>
<script>
var docScrollTop,docScrollLeft;
window.onscroll = function() {
  docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  docScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  // 结果一样
  console.log(window.pageYOffset, docScrollTop)
  console.log(window.pageXOffset, docScrollLeft)
}
</script>

滚动方法

scrollTo(x,y)

scrollTo(x,y)方法表示滚动当前window中显示的文档，让文档中坐标为x,y的点位于左上角

<style>
  html {
    width: 2000px;
    height: 2000px;
  }
</style>
<button id="btn">滚动</button>
<script>
btn.onclick = function() {
  scrollTo(50,50)
}
</script>

scrollBy(x,y)

scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量

<style>
  html {
    width: 2000px;
    height: 2000px;
  }
</style>
<button id="btn" style="position: fixed;left: 200px;top: 200px;">滚动</button>
<button id="btn2" style="position: fixed;left: 200px;top: 230px;">滚动</button>
<script>
btn.onclick = function() {
  scrollBy(50,50)
}
btn2.onclick = function() {
  scrollBy(-50,-50)
}
</script>

scrollIntoView()

Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域。该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true

<style>
  #test {
    width: 300px;
    height: 800px;
    background: teal;
    margin-top: 100px;
  }
</style>
<div id="test">test</div>
<button id="btn" style="position: fixed;left: 200px;top: 200px;">滚动</button>
<button id="btn2" style="position: fixed;left: 200px;top: 230px;">滚动</button>
<script>
btn.onclick = function() {
  test.scrollIntoView()
}
btn2.onclick = function() {
  test.scrollIntoView(false)
}
</script>

码农公寓