Javascript 父项隐藏溢出的自定义下拉列表

就我所见，在web客户端上构建自定义选择框在某种程度上是有问题的。它基本上归结为两个高级别的选项：

将选项下拉列表附加到元素本身。在这种情况下，如果选择框的父项有溢出：隐藏，则下拉列表将在溢出时被剪裁

将选项下拉列表附加到body中，在这种情况下，父元素具有

溢出：隐藏

不会成为问题，但我们需要跟踪多个事件，这些事件可能会更改select元素的位置/大小（滚动，这可能是选择框的任何父元素、调整大小、将选择元素隐藏在可滚动元素中等），这似乎既难以管理，又需要实时跟踪许多内容，可能会导致性能问题

我的问题是，在浏览器支持的html/css/javascript的最新状态下，是否有一种新的方法来处理这些问题，这在以前是不可用的？或者可能有另一种选择，而不是我上面提到的

---

我的意思的基本例子

屏幕上有更多的选项，因此 假选择将溢出其父级，也会溢出屏幕底部

您能检查一下这里缺少什么来解决您的问题吗

const dropdown=document.querySelector（'.select'）；
const selected=document.querySelector（'.selected'）；
const default_text=“…选择选项…”；
addEventListener（'click'，event=>{
const classes=event.target.classList；
if（classes.contains（'option'））{
//单击第一个元素
//打开下拉列表。
//如果需要，请更新标签。
if（classes.contains（'selected'））{
dropdown.classList.toggle（'active'）；
如果（selected.innerHTML！==默认文本）selected.innerHTML=默认文本；
}
//单击其他元素
//关闭下拉列表
//更新标签
否则{
dropdown.classList.remove（'active'）；
selected.innerHTML=event.target.innerHTML；
}
}
})；

*{
保证金：0；
填充：0；
}
.集装箱{
背景颜色：黄色；
保证金：2rem；
溢出：隐藏；
填充：2rem；
}
.选择{
列表样式：无；
高度：22px；/*20px+2px边框*/
溢出：隐藏；
位置：绝对位置；
z指数：1；
}
.select.active{
溢出：可见；
}
.选择权{
背景色：#EEEEEE；
边框：1px纯黑；
边界顶部：无；
高度：20px；
}
.选定{
边框顶部：1件纯黑；
}
标签，
输入{
背景色：#EEEEEE；
边框：1px纯黑；
保证金：4倍；
}

姓名：

…选择选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

价值：

我的意思的基本示例

屏幕上有更多的选项，因此 假选择将溢出其父级，也会溢出屏幕底部

您能检查一下这里缺少什么来解决您的问题吗

const dropdown=document.querySelector（'.select'）；
const selected=document.querySelector（'.selected'）；
const default_text=“…选择选项…”；
addEventListener（'click'，event=>{
const classes=event.target.classList；
if（classes.contains（'option'））{
//单击第一个元素
//打开下拉列表。
//如果需要，请更新标签。
if（classes.contains（'selected'））{
dropdown.classList.toggle（'active'）；
如果（selected.innerHTML！==默认文本）selected.innerHTML=默认文本；
}
//单击其他元素
//关闭下拉列表
//更新标签
否则{
dropdown.classList.remove（'active'）；
selected.innerHTML=event.target.innerHTML；
}
}
})；

*{
保证金：0；
填充：0；
}
.集装箱{
背景颜色：黄色；
保证金：2rem；
溢出：隐藏；
填充：2rem；
}
.选择{
列表样式：无；
高度：22px；/*20px+2px边框*/
溢出：隐藏；
位置：绝对位置；
z指数：1；
}
.select.active{
溢出：可见；
}
.选择权{
背景色：#EEEEEE；
边框：1px纯黑；
边界顶部：无；
高度：20px；
}
.选定{
边框顶部：1件纯黑；
}
标签，
输入{
背景色：#EEEEEE；
边框：1px纯黑；
保证金：4倍；
}

姓名：

…选择选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

价值：