Nested scrolling windows in Web pages

I recently encountered a problem when writing some web pages: a large amount of data records need to be displayed on the page.

For some reason, my customers require that all data be loaded to the page and then perform some common operations such as filtering and sorting.

With the help of our colleagues, we have determined a "virtual window" solution, which is to design a rolling window, but the content is blank. Only the window height is set based on the actual data entries, then, in its scroll event, calculate the part of data to be displayed, and then use a single Div to display this part of data.

Several problems are found during implementation:

1. The height of each record is not fixed. The content of some fields is too long and will be processed in lines. In this way, the height of this record will be a little higher than that of normal entries.

2. Incomplete display at the bottom. Due to question 1, when there are the last few records, the displayed Div height is fixed, so there will be incomplete lines.

 

The idea is as follows:

1. The displayed Div has its own scroll function, which only scrolls its internal content;

2. The external scroll window also has the scroll function. When the displayed Div scroll to the top or bottom, the new data to be displayed is calculated by the external scroll window.

 

Difficulties:

1. The onscroll event can be triggered, but the scroll direction cannot be obtained directly.

2. When the scroll position does not change, the onscroll event will not be generated. For example, if the scroll position has reached the bottom, you can continue to scroll down with the mouse to capture the onscroll event. Similarly, there is the same problem at the top.

 

The final solution points are:

1. Make sure that the scroll of each display Div does not scroll to the top or bottom. I set scrolltop through js to ensure at least 1 px from the top or bottom.

2. The judgment direction is determined by comparing the last scrolltop in Js. (I only scroll up or down, but not left or right)

3. Determine whether to trigger the onscroll event of the external rolling window by determining whether the last time has reached the bottom.

 

Source codeIs an HTML page, and style sheets and JS functions are all in it. You can download it at "http://download.csdn.net/source/1481294 ”".