如何实现容器外元素滚动时仍保持可见的效果？

可以实现，你当前的代码误区是给目标元素添加了overflow: scroll——这是用来处理元素内部内容的滚动逻辑，和你需要的页面滚动时元素的显示控制无关。

实现方案 #

核心思路是：

• 让元素初始垂直居中于视口
• 监听页面滚动事件，实时判断元素是否完全移出视口，再执行隐藏操作

代码示例 #

HTML

<div class="box">
   This box has a height and a width. If too much content is displayed 
   within the assigned height, there will be an overflow situation. If overflow is set to 
   hidden then any overflow will not be visible.
</div>

CSS

.box {
  /* 初始垂直水平居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  /* 添加过渡动画让隐藏更平滑 */
  transition: opacity 0.3s ease;
}

/* 隐藏状态类 */
.box.hidden {
  opacity: 0;
  pointer-events: none; /* 隐藏后禁止交互 */
}

JavaScript

const box = document.querySelector('.box');

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 获取元素相对于视口的位置信息
  const rect = box.getBoundingClientRect();
  // 当元素底部完全移出视口顶部时，添加隐藏类
  if (rect.bottom <= 0) {
    box.classList.add('hidden');
  } else {
    // 元素回到视口范围内时取消隐藏
    box.classList.remove('hidden');
  }
});

说明 #

1. 初始定位：用position: absolute配合top: 50%和transform: translate(-50%, -50%)实现元素在视口的垂直水平居中，这种方式不会影响其他文档流元素。
2. 滚动判断：通过getBoundingClientRect()获取元素的边界信息，当元素的bottom值小于等于0时，说明元素完全移出视口顶部，此时触发隐藏。
3. 平滑过渡：添加transition属性让隐藏/显示过程更自然，如果你需要直接移除元素，可以把opacity: 0换成display: none，但会失去过渡动画效果。

如果希望元素作为文档流的一部分随页面滚动（而非固定在视口），只需把CSS中的position: absolute去掉，换成margin-top: 50vh; margin-left: auto; margin-right: auto;来实现初始居中，滚动判断逻辑保持不变即可。

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