Home Sign Up Sign In
› React
Advertisement
sillydaddy
5.47D
4.82D
V2EX  ›  React

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

  •   
  •   sillydaddy · Jun 5, 2021 · 2609 views
    This topic created in 1830 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 属性相互配合，能实现这种效果呢？目前我能实现竖直方向的滚动。
  • div
  • 滚动
  • div4
  • div3
    7 replies  •  2021-06-06 07:19:10 +08:00
    xiaoming1992
        1
    xiaoming1992  
       Jun 5, 2021 via Android
    用另一个滚动区包裹住 div 24 ？
    iNaru
        2
    iNaru  
       Jun 5, 2021   ❤️ 2
    position: sticky
    sillydaddy
        4
    sillydaddy  
    OP
       Jun 6, 2021
    @iNaru
    @liyang5945
    用 sticky 搞定了。谢谢。
    @xiaoming1992
    用 sticky 实现很简单。
    Rocketer
        5
    Rocketer  
       Jun 6, 2021 via iPhone
    sticky 确实方便，但支持率还不够高，比如老一点的 iOS 设备就不支持，所以目前不建议使用
    jinliming2
        6
    jinliming2  
       Jun 6, 2021
    @Rocketer 看目标用户群体的吧，如果是内部系统，或者是目标客户系统的版本可以提要求，那么怎么 fancy 怎么来都行的。
    sillydaddy
        7
    sillydaddy  
    OP
       Jun 6, 2021 via Android
    @Rocketer 感谢提醒。这个特性确实比较新。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1038 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 48ms · UTC 19:06 · PVG 03:06 · LAX 12:06 · JFK 15:06
    ♥ Do have faith in what you're doing.