overflow=scroll 之后，怎样让子标签的内容，显示在父标签之外呢？
sillydaddy · 2021-06-23 12:12:16 +08:00 · 1867 次点击这是一个创建于 1236 天前的主题，其中的信息可能已经有所发展或是发生改变。
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