需要了解三個dom元素，分別是：clientHeight、offsetHeight、scrollTop。

總滾動高度 + 可視高度 = 內容總高度

scrollTop + clientHeight = offsetHeight

clientHeight：可見高度。
offsetHeight：控制元件的實際高度。
scrollTop：這個是什麼呢？他可以理解為滾動條可以滾動的長度。

舉例，如果一個DIV高度是400px（即clientHeight為400），而裡面的內容是一個很長的列表，內容的高度是1000px（即offsetHeight為1000）。

那麼，可見部分我們看到400px，1000px的內容中還有600px不可見。而這不可見的部分呢，正是我們通過拉動滾動條才能把這一部分顯示出來。

你如果滾動條不拉動，此時scrollTop為0，如果你把滾動條拉到底，顯示出列表最下面的部分，此時，scrollTop為600。

首先，我們拉動滾動條，從最上面拉到最下面，變化的是scrollTop的值，而這個值是有一個區間的。
這個區間是： [0, (offsetHeight - clientHeight)]
即，滾動條拉動的整個過程的變化在 0 到 (offsetHeight – clientHeight) 範圍之內。

1、判斷滾動條滾動到最底端： scrollTop == (offsetHeight – clientHeight)
2、在滾動條距離底端50px以內： (offsetHeight – clientHeight) – scrollTop <= 50
3、在滾動條距離底端5%以內： scrollTop / (offsetHeight – clientHeight) >= 0.95
 

js

// 當前可視的頁面高度
var clientHeight = document.documentElement.clientHeight;
// 滾動條距離頂部的高度
var scrollTop = document.documentElement.scrollTop;
// 頁面的總高度
var offsetHeight = document.documentElement.offsetHeight;

https://hbiao68.iteye.com/blog/2213198