先说一点背景。我正在开发一个与电子表格类似的可视化组件。可以在两个维度上滚动的内容区域,以及始终可见的左侧和顶部的轴指示符。
为了获得灵感,我一直在查看谷歌电子表格的 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 的任何建议?似乎很奇怪,既没有顶部样式,也没有与元素上的固定设置不同的定位样式。