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

Question

我正在尝试创建一个行为类似于 Microsoft Excel 的应用程序容器。它应该水平和垂直滚动，左侧和顶部的标题是固定的，但会随着内容滚动。像这样的东西:

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

ScrollableContainer 是所有的目标容器。它可以水平和垂直滚动。

ScrollableContainer的内容是3个div:a、b和Content。 我要解决的问题是 div a 的位置必须固定在左边，但是当 ScrollableContainer 上下滚动时它必须上下滚动。此外，div b 必须固定在顶部，但当 ScrollableContainer 上下滚动时，它必须左右滚动。 最后，Content div 可以向任何方向自由滚动。 试着想象一个“议程”。 a div 是“HOUR”支点，b div 是“DAY”支点，Content 是议程，按小时和天划分。枢轴必须跟随滚动。

编辑:

下面是一个半工作示例:- 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>

它的问题是垂直滚动条在站点之外，并且 .col header 不滚动。应该足以说明目标是什么。

Answer 1

如果您想要这种滚动行为，您需要使用 iframe 或在 javascript 中编写自定义滚动。使用 iframe，您可以将 div“a”和“b”设置为固定在它们的位置，但可能会出现一些复杂情况。使用 javascript，你可以这样写:

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';
};

这还没有经过测试，但是为了让它工作，div“a”、“b”和“content”必须分别在它们自己的容器中，但是你可以使用这些容器来定位你的 div .