这是一个创建于 1625 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 上方的空白空间就浪费了。
<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 上方的空白空间就浪费了。
 | 1 iOCZ 2021-06-23 12:17:47 +08:00 需求场景？ |
 | 2 rioshikelong121 2021-06-23 12:18:33 +08:00 overflow 都设为 auto/scroll/hidden 了 目的肯定是隐溢出部分啊。 |
 | 3 Hasel 2021-06-23 12:26:51 +08:00 有个思路是通过不同层级实现 在外侧盖一个层级高的蒙层，把不需要展示的部分盖住，需要展示的部分改 zIndex 让他在蒙层上方 不过你这需求也太奇怪了。。 |
 | 4 CptDoraemon 2021-06-23 12:28:58 +08:00  1 既然你发在 react 这个分类里，那么 react portal 了解一下？ |
 | 5 ericls 2021-06-23 12:32:26 +08:00 放在 window.document 里面 再问它谁是爸爸 |
 | 6 sillydaddy OP @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 上方的空白空间就浪费了。 |
| 7 iOCZ 2021-06-23 14:34:46 +08:00 css 也不是万能的，但是 js 是万能的。 |
| 8 sillydaddy OP @CptDoraemon 这个溢出的元素本身应该还是属于 ccccchild 的，如果用 portal 的话，要把它渲染到哪里呢？渲染到 absolute 绝对定位的元素上吗？那确实是方便了不少，不过像我主题里所说的，这种表示不太直观啊。 |
 | 9 kop1989 2021-06-23 15:06:09 +08:00 为何要用 scroll 的溢出与遮蔽实现冻结首行 /列？ |
 | 10 zhw2590582 2021-06-23 15:12:29 +08:00 为何不试试万能的 js |
| 11 CptDoraemon 2021-06-23 23:48:37 +08:00 @sillydaddy 随便在哪，container 外面挡不住就行 感觉可以弄个类似 tooltip 的东西，sticky 的时候暂时显示一下就行 |
 | 12 zed1018 2021-06-24 17:00:40 +08:00 关于这个我建议可以看看 easyui datagrid 是怎么处理的 |
| 13 sillydaddy OP @zed1018 好的 |
Select Language