如何避免div水平滚动条影响内部文本垂直对齐及外置滚动条控制内层div？

先来说第一个问题：让内层文本垂直居中，同时避免水平滚动条干扰对齐。

你的原始代码里，.inner 设置了 height:50px 和 overflow:scroll，默认的滚动条会占据容器的右侧/底部空间，导致文本的垂直居中被偏移。可以这样调整：

方案1：让文本垂直居中且滚动条不影响对齐 #

修改 .inner 的样式，用Flex布局实现垂直居中，同时明确指定只显示水平滚动条：

.outer {
  width: 50%;
  padding: 30px;
  background-color: #008000;
}
.inner {
  border: 1px solid red;
  height: 50px;
  /* 用Flex实现文本垂直居中 */
  display: flex;
  align-items: center;
  /* 只开启水平滚动，垂直方向隐藏 */
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  /* 可选：去掉默认的垂直滚动条占位（部分浏览器需要） */
  scrollbar-width: thin;
}

这样设置后，文本会垂直居中，水平滚动条只会在需要时显示，而且不会占用垂直方向的空间，也就不会干扰文本的对齐了。

接下来是第二个问题：把滚动条放在外层div的底部，通过它控制内层div的滚动。

这个需要一点JS配合，因为CSS本身没法直接把内层的滚动条移到外层，但我们可以在外层底部添加一个“代理”滚动条，然后同步它和内层的滚动位置：

方案2：外层底部滚动条控制内层滚动 #

步骤1：修改HTML结构 #

在外层里新增一个用于滚动的容器（比如叫 .scroll-proxy），放在内层的下方：

<div class="outer">
  <div class="inner">
    这里是很长的文本内容，比如：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <!-- 新增的滚动代理容器 -->
  <div class="scroll-proxy">
    <div class="scroll-content"></div>
  </div>
</div>

步骤2：设置CSS样式 #

把内层的水平滚动条隐藏，然后让代理滚动条的宽度和内层一致，高度只够显示滚动条：

.outer {
  width: 50%;
  padding: 30px;
  background-color: #008000;
  /* 让外层内部元素垂直排列 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 内层和滚动条之间的间距 */
}
.inner {
  border: 1px solid red;
  height: 50px;
  display: flex;
  align-items: center;
  /* 隐藏内层的水平滚动条 */
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  /* 允许内层横向滚动（只是隐藏滚动条） */
  scroll-behavior: smooth; /* 可选：平滑滚动 */
}
.scroll-proxy {
  /* 宽度和内层一致 */
  width: 100%;
  /* 高度只够显示滚动条 */
  height: 18px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.scroll-content {
  /* 宽度和内层的内容宽度完全一致，这样滚动条的长度才匹配 */
  width: var(--inner-content-width);
  height: 1px; /* 给个最小高度让容器能滚动 */
}

步骤3：添加JS同步滚动 #

需要先获取内层内容的宽度，赋值给代理容器的内容宽度，然后监听代理滚动条的滚动事件，同步到内层：

const inner = document.querySelector('.inner');
const scrollProxy = document.querySelector('.scroll-proxy');
const scrollContent = document.querySelector('.scroll-content');

// 初始化：把内层内容的宽度赋值给代理的内容
function setProxyWidth() {
  const innerContentWidth = inner.scrollWidth;
  scrollContent.style.setProperty('--inner-content-width', `${innerContentWidth}px`);
}

// 同步滚动：代理滚动时，让内层跟着滚动
scrollProxy.addEventListener('scroll', () => {
  inner.scrollLeft = scrollProxy.scrollLeft;
});

// 页面加载完成后初始化
window.addEventListener('load', setProxyWidth);
// 如果窗口大小变化，重新计算宽度（可选）
window.addEventListener('resize', setProxyWidth);

这样设置后，外层底部的滚动条就可以控制内层的横向滚动了，而且不会影响外层的高度，内层的文本依然保持垂直居中。

如果你的需求更简单，只是不想让滚动条占用内层的空间，也可以试试 scrollbar-gutter: stable 属性（部分现代浏览器支持），它会提前预留滚动条的空间，避免滚动条出现时挤压文本：

.inner {
  scrollbar-gutter: stable;
}

这个属性不需要JS，适合只需要解决滚动条挤压文本的场景。

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