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

我試圖創建一個應用程序容器，其行爲與Microsoft Excel類似。它應該水平和垂直滾動，左側和頂部的標題固定，但滾動內容。例如：HTML5 - 可滾動的Div容器，其中包含部分固定的div div

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

ScrollableContainer是所有的目標容器。它可以水平和垂直滾動。

ScrollableContainer的內容是3 div s：a,b和Content。我想解決的問題是diva的位置必須固定在左側，但當ScrollableContainer上下滾動時，它必須上下滾動。此外，divb必須固定在頂部，但當ScrollableContainer上下滾動時，它必須左右滾動。 Content div最後可以任意方向自由滾動。嘗試想象一個「議程」。 adiv是「HOUR」數據透視表，bdiv是「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標題不滾動。應該足以說明目標是什麼。

來源

2015-04-16 Paolo A.

顯示一些代碼請 – Sionnach733

對不起，我還沒有code ...我所有的嘗試失敗悲慘:) –

你應該表現出你的最佳嘗試。這可能有助於某人回答您的問題 – Sionnach733

如果您想要這種滾動行爲，您將需要使用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」和「內容」每一個都必須在自己的容器，但你可以使用這些容器來定位你的div，但是你想要。

來源

2015-04-16 15:42:26 Sabumnim

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

回答

相關問題