1

先说一点背景。我正在开发一个与电子表格类似的可视化组件。可以在两个维度上滚动的内容区域,以及始终可见的左侧和顶部的轴指示符。

为了获得灵感,我一直在查看谷歌电子表格的 html/css。我已经构建了一个类似的可行的解决方案,但是他们的解决方案的确切机制,更优雅一点,让我望而却步。

他们的解决方案的相关结构如下。

  • [容器] 分区。显式大小。溢出隐藏。相对位置。
    • [V-Scroll] 分区。'内容大小',完全没有使用萤火虫或铬的样式。
    • [左侧] 分区。内容大小。显示:内联块。溢出隐藏。相对位置。
      • 包含标题的表
    • [右侧] 分区。内容大小。显示:内联块。溢出隐藏。相对位置。
      • 包含内容的表格

为了进行垂直滚动,他们将 V-Scroll div 向上移动,可以通过设置 top: -15px 作为示例来完成。使用 FireBug 和 chrome 检查工具,我可以看到:

  • 执行垂直滚动时,V-Scroll div 向上移动。
  • 在 V-Scroll div 上看不到 top 或 style 属性更改。
  • 内部内容与 V-scroll div 一起向上移动。

关于他们如何定位 V-scroll div 的任何建议?似乎很奇怪,既没有顶部样式,也没有与元素上的固定设置不同的定位样式。

4

1 回答 1

0

我不熟悉谷歌代码的内部结构,但我想他们正在scrollTop通过 javascript 操作容器 div。即使溢出被隐藏导致没有滚动条,这实际上也会滚动 div。

于 2012-04-18T18:58:39.177 回答