HTML5-可滚动的Div容器，其中包含部分固定的div

Question

I'm trying to create an app container which behaves similar to Microsoft Excel. It should scroll both horizontally and vertically, with headers on the left and top which are fixed but scroll with the content. Something like:

+---ScrollableContainer---------+
|+-a-++----b--------------------|-------------------+
||   ||                         |                   |
||   |+-------------------------|-------------------|
||   |+----Content--------------|-------------------+
||   ||                         |                   |
||   ||                         |                   |
+-------------------------------+                   |
 |   ||                                             | 
 |   ||                                             |
 +---++---------------------------------------------+

The ScrollableContainer is the target container of all. It's scrollable horizontally and vertically.

The content of the ScrollableContainer is 3 div s: a , b and Content . The problem I'd like to resolve is that the position of div a must be fixed on left but it have to scroll up and down when ScrollableContainer scrolls up and down. Also, the div b must be fixed on top but it have to scroll left and right when ScrollableContainer scrolls up and down. The Content div, finally, is free to scroll in any direction. Try to imagine an "Agenda". The a div is the "HOUR" pivot, the b div is the "DAY" pivot and the Content is the agenda, split by hours and days. Pivots had to follow scroll.

EDIT:

Below is a semi-working example: - AndyM

 .rows { height:200px; width:400px; background-color:rgb(240,240,240); position:relative; } .rows > header { position:absolute; top:0; left:0; bottom:0; width:40px; background-color:blue; } .rows > article { position:absolute; top:0; left:40px; bottom:0; right:0; overflow-x:scroll; } .cols { position:relative; height:100%; } .cols header { height:40px; position:absolute; top:0; left:0; background-color:green; } .cols article { position:absolute; top:40px; bottom:0; left:0; overflow-y:scroll; } row { display:block; height:40px; white-space:nowrap; } cell { display:inline-block; height:100%; width:70px; } 

 <section class="rows"> <header> <row> <cell>Text</cell> </row> <row> <cell>Text</cell> </row> <row> <cell>Text</cell> </row> <row> <cell>Text</cell> </row> <row> <cell>Text</cell> </row> <row> <cell>Text</cell> </row> </header> <article> <section class="cols"> <header> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> </header> <article> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> <row> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> <cell>Text</cell> </row> </article> </section> </article> </section> 

Problem with it is that the vertical scroll bar is out of site, and the .col header doesn't scroll. Should be enough to give an idea of what the goal is.

Answer 1

If you want this sort of scrolling behavior, you will either need to use an iframe or do write custom scrolling in javascript. With an iframe, you could just set divs 'a' and 'b' to be fixed in their position, but there could be a few complications. With javascript, you could write something like this:

var x=0, y=0;
ScrollableContainer.onwheel = function(e) {
  if(firefox) {
    x+=e.deltaX*16;
    y+=e.deltaY*16;
  } else {
    x+=e.deltaX;
    y+=e.deltaY;
  }
  a.style.marginTop = y + 'px';
  b.style.marginLeft = x + 'px';
  content.style.marginTop = y + 'px';
  content.style.marginLeft = y + 'px';
};

This has not been tested, but for this to work, divs 'a', 'b', and 'content' must each be in their own container, but you can use these containers to position your divs however you want to.