2012-04-18 54 views
1

有點像背景第一。我正在研究一個與電子表格類似的可視化組件。可在兩個維度中滾動的內容區域,以及左側和頂部的軸指示符始終保持可見。不使用樣式屬性的位置dom元素?

爲了獲得靈感,我一直在尋找谷歌電子表格的html/css。我已經構建了一個可行的類似解決方案,但是他們的解決方案的確切機制稍微優雅一些​​,我無法迴避。

其解決方案的相關結構如下。

  • [Container] Div。明確的大小。溢出隱藏。相對位置。
    • [V-Scroll] Div。 「內容大小」,根本沒有造型使用螢火蟲或鉻。
    • [Left-Side] Div。內容大小。顯示:內嵌塊。溢出隱藏。相對位置。
      • 含有表頭
    • [右側]本部內容大小。顯示:內嵌塊。溢出隱藏。相對位置。
      • 含有表內容

爲了做到垂直滾動它們移動至V-滾動div的向上,如可以通過設置頂端來完成:-15px作爲一個例子。使用FireBug和鉻檢查工具,我可以看到:

  • 當執行垂直滾動時,V-Scroll div向上移動。
  • 在V-Scroll div上不能看到頂部或樣式屬性更改。
  • 內容與V-scroll div一起向上移動。

有關如何定位V-scroll div的任何建議?看起來很奇怪,既沒有頂部風格,也沒有與元素上的固定設置不同的定位風格。

回答

0

我不熟悉谷歌代碼的內部,但我想他們正在操縱容器div的scrollTop通過javascript。這將實質上滾動div,即使溢出隱藏導致沒有滾動條。

+0

對嗎?謝謝!不知道那個屬性。 – Jannick 2012-04-18 19:54:27

相關問題