V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
V2EX  ›  React

overflow=scroll 之后,怎样让子标签的内容,显示在父标签之外呢?

  •  
  •   sillydaddy · 2021-06-23 12:12:16 +08:00 · 1904 次点击
    这是一个创建于 1282 天前的主题,其中的信息可能已经有所发展或是发生改变。

    parent 标签的 overflow 设置为 scroll 之后,child 的内容,如果溢出了 parent 的宽高范围,想要不被裁剪,怎么做呢?

    <div class="parent" style="overflow:scroll">
      ...
          <div class="cccchild">
                something need to be visible even if overflows parent
          </div>
    </div>
    

    这样的需求应该说并不奇特吧。

    我发现 parent 的 overflow 一旦被设置为 scroll,或者说是 scroll/hidden/auto 这些“具有滚动机制”的选项,就会对所有的 child递归裁剪,没有 child 能逃脱。所以想要实现溢出不被裁剪的效果,似乎只能借助“position:absolute”这种脱离文档流的方式了。

    但脱离文档流就有些不太直观——溢出到 parent 外面的内容,仍然是属于 cccchild 里面的,也会随着 cccchild 的滚动而滚动,感觉一旦脱离了文档流,处理起来会麻烦很多。

    我的理解对吗?还有更简洁直观的方法吗? 前端经验还欠缺,请大家不吝指点。

    第 1 条附言  ·  2021-06-23 14:25:25 +08:00
    这个需求,是从我的项目里面提出来的,参考这个帖子 ( /t/781580 )——“怎样用 scroll 实现类似“冻结首行、冻结首列”的效果”
    <div id="container">
    <div id="1"> <div id="2">
    <div id="3"> <div id="4">
    </div>

    我把 div1 和 div2 的 position 设置为 sticky,div#container 的 overflow 设置为 scroll,实现了类似于冻结首行的效果。

    在 div2 里面有一些元素,超出 div1 和 div2 的高度,也就是 overflow 了,而恰好 div2 上方有一块空间是空白的(而 di v1 上方则没有),所以,我希望可以充分利用这块空白的空间,让 div2 中溢出的部分能显示在这块空间里面。如果通过增加 div1 和 div2 的高度来解决,那么 div2 上方的空白空间就浪费了。
    13 条回复    2021-06-24 20:52:09 +08:00
    iOCZ
        1
    iOCZ  
       2021-06-23 12:17:47 +08:00
    需求场景?
    rioshikelong121
        2
    rioshikelong121  
       2021-06-23 12:18:33 +08:00
    overflow 都设为 auto/scroll/hidden 了 目的肯定是隐藏溢出部分啊。
    Hasel
        3
    Hasel  
       2021-06-23 12:26:51 +08:00
    有个思路是通过不同层级实现
    在外侧盖一个层级高的蒙层,把不需要展示的部分盖住,需要展示的部分改 zIndex 让他在蒙层上方

    不过你这需求也太奇怪了。。
    CptDoraemon
        4
    CptDoraemon  
       2021-06-23 12:28:58 +08:00   ❤️ 1
    既然你发在 react 这个分类里,那么 react portal 了解一下?
    ericls
        5
    ericls  
       2021-06-23 12:32:26 +08:00
    放在 window.document 里面 再问它谁是爸爸
    sillydaddy
        6
    sillydaddy  
    OP
       2021-06-23 14:22:11 +08:00
    @iOCZ
    @Hasel

    这个需求,是从我的项目里面提出来的,参考这个帖子 ( /t/781580 )——“怎样用 scroll 实现类似“冻结首行、冻结首列”的效果”
    <div id="container">
    <div id="1"> <div id="2">
    <div id="3"> <div id="4">
    </div>

    我把 div1 和 div2 设置为 sticky,div.container 设置为 scroll,实现了类似于冻结首行的效果。

    在 div2 里面有一些元素,超出 div1 和 div2 的高度,也就是 overflow 了,而恰好 div2 上面有一块空间是空白的,所以,我希望可以充分利用这块空白的空间,让 div2 中溢出的部分能显示在这块空间里面。如果通过增加 div1 和 div2 的高度来解决,那么 div2 上方的空白空间就浪费了。
    iOCZ
        7
    iOCZ  
       2021-06-23 14:34:46 +08:00
    css 也不是万能的,但是 js 是万能的。
    sillydaddy
        8
    sillydaddy  
    OP
       2021-06-23 14:41:07 +08:00
    @CptDoraemon
    这个溢出的元素本身应该还是属于 ccccchild 的,如果用 portal 的话,要把它渲染到哪里呢?渲染到 absolute 绝对定位的元素上吗?那确实是方便了不少,不过像我主题里所说的,这种表示不太直观啊。
    kop1989
        9
    kop1989  
       2021-06-23 15:06:09 +08:00
    为何要用 scroll 的溢出与遮蔽实现冻结首行 /列?
    zhw2590582
        10
    zhw2590582  
       2021-06-23 15:12:29 +08:00
    为何不试试万能的 js
    CptDoraemon
        11
    CptDoraemon  
       2021-06-23 23:48:37 +08:00
    @sillydaddy 随便在哪,container 外面挡不住就行
    感觉可以弄个类似 tooltip 的东西,sticky 的时候暂时显示一下就行
    zed1018
        12
    zed1018  
       2021-06-24 17:00:40 +08:00
    关于这个我建议可以看看 easyui datagrid 是怎么处理的
    sillydaddy
        13
    sillydaddy  
    OP
       2021-06-24 20:52:09 +08:00
    @zed1018
    好的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1000 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:53 · PVG 05:53 · LAX 13:53 · JFK 16:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.