如何让随项滚动的绝对定位元素超出父容器且不触发横向滚动

DevOps 小满

2026-8-15

问题需求

我有一个仅支持垂直滚动、不支持横向滚动的项容器。给其中一个项附加了一个绝对定位的小黑块，它已能随项上下滚动（贴合蓝色方块），但我希望该黑块能超出父容器显示，同时不使容器产生横向滚动。目前由于overflow: hidden，黑块大部分被隐藏；position: fixed虽能实现超出显示，但无法随项滚动。

解决方案

核心思路是移除容器的横向裁剪限制，用内部包裹层约束蓝色方块的横向范围，让绝对定位的黑块能自然超出容器显示，同时保留容器的垂直滚动功能。

具体实现步骤：

在原容器内部新增一个包裹层，把所有蓝色方块项放入其中
包裹层设置和原蓝色方块一致的宽度，用来约束项的横向范围
容器保留垂直滚动，取消横向隐藏限制

修改后的HTML

<div class="container">
  <div class="inner-wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item">
      <div class="sticky-item"></div>
    </div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

修改后的CSS

.container {
  background-color: green;
  width: 200px;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: visible;
  position: relative;
}

.inner-wrap {
  width: 170px;
}

.item {
  background-color: blue;
  height: 120px;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
}

.sticky-item {
  background-color: black;
  height: 50px;
  width: 50px;
  position: absolute;
  left: 100%;
}