如何让列表元素溢出父容器同时保留父容器Y轴滚动功能？

要实现保留滚动条同时让列表项悬停时溢出容器，核心是避开父容器overflow-y: scroll的裁剪限制。可以通过给列表项（li）添加内层容器的方式实现：

1. 给每个li设置position: relative，作为内层容器的定位参考
2. 将li的内容放到一个内层div中，让这个div在hover时放大，且不受ul的裁剪
3. ul保持overflow-y: scroll来保留滚动功能

修改后的代码如下：

CSS 代码 #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

ul {
  padding: 8px;
  border: 1px solid green;
  overflow-y: scroll;
  height: 300px;
  width: 200px;
  padding-top: 40px;
  padding-bottom: 40px;
}

li {
  list-style-type: none;
  height: 80px;
  position: relative;
  margin-bottom: 8px;
}

li .item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid brown;
  transition: transform 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}

li:hover .item-content {
  transform: scale(1.3);
  z-index: 10;
}

HTML 代码 #

<body>
  <ul>
    <li>
      <div class="item-content">Hello</div>
    </li>
    <li>
      <div class="item-content">Hello</div>
    </li>
    <li>
      <div class="item-content">Hello</div>
    </li>
    <li>
      <div class="item-content">Hello</div>
    </li>
    <li>
      <div class="item-content">Hello</div>
    </li>
  </ul>
</body>

关键说明 #

• 内层容器item-content用绝对定位脱离了ul的overflow裁剪上下文，放大时可溢出ul容器
• 给ul增加上下内边距，避免顶部、底部的列表项放大时被浏览器视口裁剪
• 设置z-index确保放大的列表项显示在其他列表项上方
• li保持原高度，不影响列表的滚动布局

内容的提问来源于stack exchange，提问作者Hao