WEB頁面中嵌套的滾動視窗

最近在寫一些WEB頁面，遇到一個問題：需要在頁面上展示大量的資料記錄

出於某些原因，我的客戶要求必須將所有資料載入到頁面中，然後進行一些常見的過濾、排序等操作。

在同事的協助下，我們確定了一個“虛擬視窗”的方案，就是設計一個滾動視窗，但是內容空白，只有視窗height是根據實際資料條目設定，然後在它的scroll事件中，計算需要顯示哪部分資料，再單獨用一個DIV來顯示這部分資料。

實施過程中，發現幾個問題：

1. 每條記錄的Height不是固定的。 有些條目的欄位內容太長，會折行處理，這樣，這條記錄的高度就會比正常的條目高一點。

2. 底端顯示不完整。由於問題1，到最後幾條記錄的時候，由於顯示的DIV高度是固定的，所以有折行的時候，會顯示不完整。

 

於是進行改進，思路是這樣：

1. 顯示的DIV自己有滾動功能， 只滾動自己內部的內容；

2. 外部的scroll視窗也有滾動功能，當顯示的DIV滾動到頂端或者底端，仍然繼續滾動的時候，由外部的滾動視窗計算新的需要顯示的資料。

 

痛點在於：

1. onscroll事件的觸發可以捕獲，但是不能直接獲得scroll的方向

2. 當scroll位置沒有變化時，不會產生onscroll事件，例如，已經到達底部，這時繼續用滑鼠向下滾動，捕獲不到onscroll事件，同樣，在頂端有同樣問題。

 

最後的解決方案要點是：

1. 確保每次顯示DIV的滾動不會滾動到頂部或者底部。我是通過JS設定scrollTop，保證至少離頂部或者底部有1px的距離

2. 判斷方向是通過JS比較上次的scrollTop來判斷的。（我只做了上下滾動，左右滾動沒有做）

3. 通過判斷上次是否已經到達底部，來決定是否觸發外部滾動視窗的onscroll事件。

 

原始碼就是一個HTML頁面，樣式表和JS函數都在裡面。可以到“http://download.csdn.net/source/1481294”下載