滚动父容器中<code>context > div</code>子元素被裁切问题求助

核心需求梳理 #

• 子元素（context > div）需在父容器内始终居中，支持动态宽高
• 仅父容器显示滚动条，body无滚动条
• 解决滚动至父容器边缘时子元素被裁切的问题

方案一：修复绝对定位实现 #

问题根源 #

当前绝对定位的子元素以父容器可视区域为基准居中，当子元素尺寸超过父容器可视范围时，滚动至边缘会导致子元素部分内容被裁切。我们需要让父容器的滚动内容区域与子元素尺寸匹配，同时调整子元素的定位逻辑。

代码实现 #

CSS 样式

body {
  margin: 0;
  overflow: hidden; /* 隐藏body滚动条 */
}

.context {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: auto; /* 仅父容器显示滚动条 */
}

.context > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 宽高由JS动态设置，示例值仅作演示 */
  width: 1200px;
  height: 1200px;
  background: pink;
}

/* 添加占位元素，让父容器滚动区域匹配子元素尺寸 */
.context .placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

JavaScript 逻辑

const child = document.querySelector('.context > div');
const placeholder = document.createElement('div');
placeholder.className = 'placeholder';
child.parentElement.appendChild(placeholder);

// 动态设置子元素尺寸时同步更新占位元素
function setChildSize(width, height) {
  child.style.width = `${width}px`;
  child.style.height = `${height}px`;
  placeholder.style.width = `${width}px`;
  placeholder.style.height = `${height}px`;
}

// 示例：初始化设置尺寸
setChildSize(1200, 1200);

方案二：非绝对定位的Flex布局实现（推荐） #

Flex布局天然支持元素居中，且无需处理绝对定位的滚动裁切问题，更简洁易维护。

代码实现 #

CSS 样式

body {
  margin: 0;
  overflow: hidden; /* 隐藏body滚动条 */
}

.context {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: auto; /* 仅父容器显示滚动条 */
}

.context > div {
  /* 宽高由JS动态设置，示例值仅作演示 */
  width: 1200px;
  height: 1200px;
  background: pink;
}

JavaScript 逻辑

const child = document.querySelector('.context > div');

// 动态设置子元素尺寸
function setChildSize(width, height) {
  child.style.width = `${width}px`;
  child.style.height = `${height}px`;
}

// 示例：初始化设置尺寸
setChildSize(1200, 1200);

优势 #

• 无需额外占位元素，代码更简洁
• Flex布局的居中逻辑基于父容器的整个内容区域，滚动时不会出现子元素裁切问题
• 更符合现代CSS布局规范，易于理解和维护

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