如何将滚动条从屏幕默认右侧移至容器/div内部？

核心原因 #

外部默认滚动条出现是因为body或父容器的内容高度超过了浏览器视口高度，浏览器自动生成了全局滚动条。要只保留内部div的滚动条，需要限制全局容器的高度并禁用其滚动，同时让内部div独立处理滚动逻辑。

具体解决方案 #

1. 锁定全局容器的高度并隐藏滚动 #

给html和body设置固定高度，清除默认边距并禁用滚动：

html, body {
  height: 100vh; /* 高度与视口完全一致 */
  margin: 0; /* 清除浏览器默认边距，避免额外高度溢出 */
  overflow: hidden; /* 直接隐藏全局滚动条 */
}

2. 调整内部滚动容器的样式 #

避免给内部div设置远超视口的固定高度（比如你之前用的1000px），改用相对视口的高度，确保容器不会撑破全局容器：

<div style="height: 100vh; overflow-y: auto; padding: 10px; box-sizing: border-box;">
  <!-- 这里放置你的长内容 -->
</div>

• height: 100vh：让容器高度匹配视口，不会超出全局容器范围
• overflow-y: auto：仅在内容超出容器时显示滚动条（比scroll更灵活，无溢出时不显示空滚动条）
• box-sizing: border-box：避免内边距导致容器高度额外增加，防止触发意外溢出

3. 父容器额外处理 #

如果内部div还有上层父容器，需要给父容器也设置：

.parent-container {
  height: 100%;
  overflow: hidden;
}

确保父容器不会因为内部div的高度而溢出，触发全局滚动。

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div style="height: 100vh; overflow-y: auto; padding: 20px; box-sizing: border-box;">
    <!-- 模拟长内容 -->
    <p>内容行1</p>
    <p>内容行2</p>
    <p>内容行3</p>
    <!-- 重复更多内容行... -->
    <p>内容行100</p>
  </div>
</body>
</html>

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