如何用CSS将可滚动div的滚动条移至页面最右侧？

直接修改::-webkit-scrollbar的定位属性确实行不通——浏览器对滚动条伪元素的布局有严格限制，margin、position这类属性根本不会生效。得通过调整滚动容器的布局，间接让滚动条跑到页面最右侧：

核心方案：让滚动容器撑满视口宽度，内容保持左侧位置 #

假设你原本的左侧div宽度是280px，按下面的代码来写：

/* 先隐藏页面默认滚动条，避免双滚动条干扰 */
body {
  margin: 0;
  overflow-y: hidden;
}

/* 滚动容器：宽度拉满整个视口，滚动条自然到最右侧 */
.left-scroll-box {
  overflow-y: scroll;
  width: 100vw;
  height: 100vh;
}

/* 容器内的内容：保持原本左侧的宽度和位置 */
.left-scroll-box .content {
  width: 280px;
  padding: 16px;
  /* 这里可以加你原本的内容样式，比如背景、边框 */
}

/* 可选：自定义滚动条样式（仅美化，不影响位置） */
.left-scroll-box::-webkit-scrollbar {
  width: 8px;
}
.left-scroll-box::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}
.left-scroll-box::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

原理说明 #

滚动条的位置是绑定在滚动容器的边缘上的，你把容器宽度拉满整个视口，它的滚动条自然就会贴在页面最右侧。而容器内的内容只保留原本左侧div的宽度，视觉上还是左侧的内容区域，但滚动条已经移到了你想要的位置。

如果页面还有其他右侧内容，不想让滚动容器覆盖它们，可以给滚动容器套一层父级，用overflow: hidden裁剪，再通过margin偏移调整容器位置，本质还是让滚动条的部分落在页面最右侧。

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