JS之DOM篇-scroll滾動

前面兩篇文章介紹了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>