假設(shè)現(xiàn)在有一個(gè)網(wǎng)頁(yè)A, 它的高度為scrollHeight;
image.png
我們?yōu)g覽器的窗口高度為clientHeight,
image.png
在網(wǎng)頁(yè)向下翻動(dòng)的過(guò)程中先煎，會(huì)出現(xiàn)以下情況
image.png
網(wǎng)頁(yè)被卷上去的高度為scrollTop,
那么滾動(dòng)條到底部時(shí)赏枚，網(wǎng)頁(yè)與瀏覽器窗口如下所示
image.png
這樣瓶蝴，我們就可以得到滾動(dòng)條是否滾到底部的判斷條件是
scrollHeight = scrollTop + clientHeight
所以在實(shí)現(xiàn)時(shí)我們只要獲取這三個(gè)值就可以了孝偎，而這三個(gè)值js都有對(duì)應(yīng)的api獲取，分別是
document.body.scrollHeight || document.documentElement.scrollHeight
document.body.scrollTop || document.documentElement.scrollTop
document.body.clientHeight || document.documentElement.clientHeight
注意：不同的瀏覽器可能獲取這三個(gè)值的方式有些許差別
其他類(lèi)似api有
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
在IE中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
document.documentElement.scrollTop =>窗口滾動(dòng)條滾動(dòng)高度
在FireFox中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
document.documentElement.scrollTop =>窗口滾動(dòng)條滾動(dòng)高度
在chrome中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
document.body.scrollTop =>窗口滾動(dòng)條滾動(dòng)高度
在Opera中：
document.body.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?document.body.clientHeight ==> 可見(jiàn)區(qū)域高度
document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高
滾動(dòng)到頂部 window.scrollTo(0,0)
滾動(dòng)到尾部 window.scrollTo(0,document.body.clientHeight)
