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

Home Sign Up Sign In

› React

This topic created in 1982 days ago, the information mentioned may be changed or developed.

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

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

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

7 replies • 2021-06-06 07:19:10 +08:00

xiaoming1992

Jun 5, 2021 via Android

1

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

iNaru

Jun 5, 2021

2

2

position: sticky

liyang5945

Jun 5, 2021

3

3

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

sillydaddy

OP

Jun 6, 2021

4

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

Rocketer

Jun 6, 2021 via iPhone

5

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

jinliming2

Jun 6, 2021

6

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

sillydaddy

OP

Jun 6, 2021 via Android

7

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

About · Help · Advertise · Blog · API · FAQ · Privacy · Solana · 4561 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 34ms · UTC 08:36 · PVG 16:36 · LAX 00:36 · JFK 03:36
♥ Do have faith in what you're doing.