问题描述
react-window 是一个用于高效呈现大型列表和表格数据的 React 库 但是这个库本身并不直接支持固定表格行列 如果在使用 react-window 的时候存在固定行列需求，我们只能自己完成封装
固定行列虚拟 table 效果类似于这样：
实现原理 - 官方 demos & issues
如果要了解在 react-window 中如何实现固定头列(sticky 布局)，可以阅读下面资料：
Does this library support "sticky" items?
Fixed grid headers with CSS position sticky #166
需求描述
- 基于 react-window 实现一个 table 的功能
- 该 table 能够实现4 个方向上(top, right, bottom, left) 固定行列(通过参数控制)
实现
9 区块的图示
table 的场景下，如果需要实现 4 个方向上(top, right, bottom, left)的 sticky 布局，那么展示应该如下图所示
区域说明：
1, 2, 3, 4\]: z-index 为最大值的区域，该区域不会随着滚动而发生内容的变化 \[5, 6, 7, 8\]: z-index 处于中间值的区域，5,7 不会随着 x 轴的滚动而发变化；6,8 不会随着 y 轴的滚动而发生变化 \[content\]: z-index 为最小值的区域，是 table 的非 sticky 区域 ## 9 区块的 html 实现 这种多区块布局 + sticky 布局，直接封装组件很容易出现问题，所以这里我们先使用 html + css 完成最基础的布局，然后才进行组件的开发 [code url - 6_sticky布局9区块的实现](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FouleWorld%2Foulae_blog_warehouse%2Fblob%2Fmain%2Fmarkdown%2F%25E8%2599%259A%25E6%258B%259F%25E6%25BB%259A%25E5%258A%25A8%2Fdemos%2F6_sticky%25E5%25B8%2583%25E5%25B1%25809%25E5%258C%25BA%25E5%259D%2597%25E7%259A%2584%25E5%25AE%259E%25E7%258E%25B0.html "https://github.com/ouleWorld/oulae_blog_warehouse/blob/main/markdown/%E8%99%9A%E6%8B%9F%E6%BB%9A%E5%8A%A8/demos/6_sticky%E5%B8%83%E5%B1%809%E5%8C%BA%E5%9D%97%E7%9A%84%E5%AE%9E%E7%8E%B0.html") 页面效果：  ## 组件的封装 封装思路：计算 \[1, 2, 3, 4, 5, 6, 7, 8, content\] 所有容器的需要展示的元素，然后将这些元素塞入到预定好的 DOM 中 封装难点：8 个 sticky 元素的 css 布局实现起来比较麻烦 组件的代码和文档可以参照下面两个链接: [code - ReactWindowStickyCells 组件代码](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FouleWorld%2Foulae_dumi_component_web%2Fblob%2Fmain%2Fsrc%2FReactWindowStickyCells%2Findex.jsx "https://github.com/ouleWorld/oulae_dumi_component_web/blob/main/src/ReactWindowStickyCells/index.jsx") [ReactWindowStickyCells 组件文档](https://link.juejin.cn?target=https%3A%2F%2Fouleworld.github.io%2Foulae_dumi_component_web%2Fcomponent%2Freact-window-sticky-cells%23reactwindowstickycells "https://ouleworld.github.io/oulae_dumi_component_web/component/react-window-sticky-cells#reactwindowstickycells")  **如果需要理解组件的具体实现，推荐先看完参考资料，理解 react-window 的基本原理** **如果想要弄清楚实现细节，这里可以看下组件的实现细节，代码阅读难度不高，这里最难的地方其实这个 css 布局的处理** # 参考链接 1. [Does this library support "sticky" items?](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fbvaughn%2Freact-window%23does-this-library-support-sticky-items "https://github.com/bvaughn/react-window#does-this-library-support-sticky-items") 2. [Fixed grid headers with CSS position sticky #166](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fbvaughn%2Freact-window%2Fissues%2F166 "https://github.com/bvaughn/react-window/issues/166") 3. [code - ReactWindowStickyCells 组件代码](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FouleWorld%2Foulae_dumi_component_web%2Fblob%2Fmain%2Fsrc%2FReactWindowStickyCells%2Findex.jsx "https://github.com/ouleWorld/oulae_dumi_component_web/blob/main/src/ReactWindowStickyCells/index.jsx") 4. [ReactWindowStickyCells 组件文档](https://link.juejin.cn?target=https%3A%2F%2Fouleworld.github.io%2Foulae_dumi_component_web%2Fcomponent%2Freact-window-sticky-cells%23reactwindowstickycells "https://ouleworld.github.io/oulae_dumi_component_web/component/react-window-sticky-cells#reactwindowstickycells") 5. [虚拟滚动 demo 相关](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FouleWorld%2Foulae_blog_warehouse%2Ftree%2Fmain%2Fmarkdown%2F%25E8%2599%259A%25E6%258B%259F%25E6%25BB%259A%25E5%258A%25A8%2Fdemos%2F7_react_window_%25E5%259B%25BA%25E5%25AE%259A%25E8%25A1%258C%25E5%2588%2597%25E8%25A1%25A8%25E6%25A0%25BC "https://github.com/ouleWorld/oulae_blog_warehouse/tree/main/markdown/%E8%99%9A%E6%8B%9F%E6%BB%9A%E5%8A%A8/demos/7_react_window_%E5%9B%BA%E5%AE%9A%E8%A1%8C%E5%88%97%E8%A1%A8%E6%A0%BC")