如何实现页面滚动条内嵌悬浮而非固定吸附在页面侧边

核心原因 #

原生webkit滚动条伪元素不属于普通DOM节点，是浏览器直接绘制在滚动容器外侧的图层，无法通过margin、left这类定位属性调整偏移，所以你之前的尝试都不生效。

方案1：纯CSS容器嵌套实现（仅webkit内核浏览器可用，无需额外脚本） #

实现逻辑 #

通过嵌套两层容器，给内层滚动容器增加右侧内边距预留出滚动条悬浮的空间，同时将滚动条轨道设为透明，视觉上就会呈现滚动条悬浮在内容内部的效果。

代码示例 #

HTML结构

<!-- 外层容器负责裁切溢出内容 -->
<div class="scroll-outer">
  <!-- 内层容器负责滚动，预留滚动条空间 -->
  <div class="scroll-inner">
    <!-- 你的所有页面内容 -->
  </div>
</div>

CSS代码

/* 外层容器 */
.scroll-outer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 内层滚动容器 */
.scroll-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* 右侧预留20px空间放滚动条，可按需调整 */
  padding-right: 20px;
  /* 必须设为content-box，避免padding挤压内容宽度 */
  box-sizing: content-box;
}

/* 滚动条相关样式 */
::-webkit-scrollbar {
  width: 12px;
}
/* 轨道设为透明，隐藏侧边的固定条 */
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
/* 滚动滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: url("/assets/ScrollWheel.svg");
  background-repeat: no-repeat;
  background-position: center;
  /* 可按需添加半透背景增强辨识度 */
  background-color: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.2); 
}

方案2：自定义模拟滚动条（全浏览器兼容） #

如果需要兼容非webkit内核浏览器，可以使用开源的轻量模拟滚动条组件，这类组件会将滚动条渲染为普通DOM元素，可直接通过CSS调整位置、偏移量，实现任意悬浮效果，无需自己实现滚动监听、拖拽等复杂逻辑。

注意事项 #

如果要实现整页的内嵌滚动条，直接把上述结构套在页面所有内容外层即可，也可以直接给html设置overflow: hidden，给body设置height: 100vh; overflow-y: auto; padding-right: 20px; box-sizing: content-box;，省去嵌套容器的步骤。

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