怎样用 scroll 实现类似“冻结首行、冻结首列”的效果呢？

[sillydaddy]

有一个 2 行 2 列的结构，
<div id="1"> <div id="2">
<div id="3"> <div id="4">

想要实现的是，
在竖直方向上滚动时，div1 和 div2 保持固定，div3 和 div4 上下滚动；
在水平方向上滚动时，div1 和 div3 保持固定，div2 和 div4 左右滚动；

哪些 css 属性相互配合，能实现这种效果呢？目前我能实现竖直方向的滚动。

[xiaoming1992]

用另一个滚动区包裹住 div 24 ？

[iNaru]

position: sticky

[liyang5945]

这个之前俺搞过： https://liyangzone.com/2020/08/15/%E5%89%8D%E7%AB%AF/draggable-fixed-header-table/

[sillydaddy]

@iNaru
@liyang5945
用 sticky 搞定了。谢谢。
@xiaoming1992
用 sticky 实现很简单。

[Rocketer]

sticky 确实方便，但支持率还不够高，比如老一点的 iOS 设备就不支持，所以目前不建议使用

[jinliming2]

@Rocketer 看目标用户群体的吧，如果是内部系统，或者是目标客户系统的版本可以提要求，那么怎么 fancy 怎么来都行的。

[sillydaddy]

@Rocketer 感谢提醒。这个特性确实比较新。