一、問題
專案裡允許使用者進行一本教材章課節的設定，如下圖：
假設使用者選擇了滾動條下的內容，如圖：「回顧與思考」，下次使用者進來時，頁面載入完畢需要立即展示已選中的內容，置為綠色。而不是如下圖所示的狀態：
很明顯，上圖的展示並沒有實現很好的使用者體驗，使用者進入到介面後無法直接看到自己已選擇的內容位於整個目錄的什麼位置。
二、解決
//思路：獲取到已被選擇的章節，然後通過遍歷的方式計算其上所有li的高度的綜合，再判斷該總和高度與外部邊框的高度差，為負數說明在邊框內顯示，為正數說明在邊框外顯示，需要調整。調整的距離恰是那個差值，使用不在顯示區域內的已被選中章節，頁面載入完畢後顯示
function
scrolls());
height_ = lis_height -ul_height;
if(height_ >= 0)
}
$(".chapter").scrolltop(height_);
即可獲得效果 滾動條滾動到頁面底部繼續載入
這個例項應該說可以很簡單，直接使用jquery的方法來處理也是可以的。但本文底層使用原生的js來處理，遇到一些小知識點可以分析一下也算有所得。原理很簡單，就是為window新增乙個scroll事件，瀏覽器每次觸發scroll事件時判斷是否滾動到了瀏覽器底部，如果到了底部則載入新資料。關鍵是計算滾動條...
滾動條到底部，自動載入資料
第一種情況 直接在body裡新增節點，產生滾動條，此時window的高度固定，window.height document.height w 0 或者x h 沒有滾動條，window scroll function event 第2種情況 直接在body的div裡新增節點，產生滾動條，此時windo...
滾動到頁面底部自動載入內容
上網時經常會看到許多酷炫的網頁，其中給我印象較深刻的是滑鼠滾動到頁面底部時會自動載入內容，一直都很好奇是怎麼樣做到的，於是自己也嘗試著寫了一下。先上個完整 吧 doctype html html lang en head meta charset utf 8 title document title...