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”下载