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

[sillydaddy]

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 的滚动而滚动，感觉一旦脱离了文档流，处理起来会麻烦很多。

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

[iOCZ]

需求场景？

[rioshikelong121]

overflow 都设为 auto/scroll/hidden 了 目的肯定是隐藏溢出部分啊。

[Hasel]

有个思路是通过不同层级实现
在外侧盖一个层级高的蒙层，把不需要展示的部分盖住，需要展示的部分改 zIndex 让他在蒙层上方

不过你这需求也太奇怪了。。

[CptDoraemon]

既然你发在 react 这个分类里，那么 react portal 了解一下？

[ericls]

放在 window.document 里面 再问它谁是爸爸

[sillydaddy]

@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]

css 也不是万能的，但是 js 是万能的。

[sillydaddy]

@CptDoraemon
这个溢出的元素本身应该还是属于 ccccchild 的，如果用 portal 的话，要把它渲染到哪里呢？渲染到 absolute 绝对定位的元素上吗？那确实是方便了不少，不过像我主题里所说的，这种表示不太直观啊。

[kop1989]

为何要用 scroll 的溢出与遮蔽实现冻结首行 /列？

[zhw2590582]

为何不试试万能的 js

[CptDoraemon]

@sillydaddy 随便在哪，container 外面挡不住就行
感觉可以弄个类似 tooltip 的东西，sticky 的时候暂时显示一下就行

[zed1018]

关于这个我建议可以看看 easyui datagrid 是怎么处理的

[sillydaddy]

@zed1018
好的