如何让DIV的滚动条紧贴其右侧边缘？

你的问题核心在于DIV的宽度（1px）远小于你定义的滚动条宽度（15px），浏览器会自动扩展元素宽度来容纳滚动条，最终导致滚动条和DIV右边缘出现空隙。可以通过以下两种方式解决：

方法一：直接调整DIV宽度匹配滚动条宽度 #

把DIV的width属性修改为你设置的滚动条宽度（15px），这样滚动条就能完全填满DIV的宽度，自然紧贴右边缘：

/* 修改后的DIV CSS */
height: 1px;
margin: 146px 0 56px 15px;
overflow-x: hidden;
overflow-y: auto;
width: 15px; /* 改为滚动条的宽度值 */

方法二：保持窄视觉宽度的嵌套容器方案 #

如果需要保持元素视觉上的窄宽度，同时让滚动条紧贴边缘，可以使用双层容器结构：

• 外层容器：设置滚动条宽度，通过内边距模拟窄视觉效果
• 内层容器：放置实际内容，宽度设为100%

<div class="outer-container">
  <div class="inner-content">
    <!-- 你的内容 -->
  </div>
</div>

.outer-container {
  height: 1px;
  margin: 146px 0 56px 15px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 15px; /* 滚动条宽度 */
  padding-left: 14px; /* 留出1px的视觉窄边 */
  box-sizing: border-box;
}

.inner-content {
  width: 100%;
}

/* 你的滚动条样式保持不变 */
::-webkit-scrollbar-button:single-button {
    background-color:var(--button);
    display:block;
    border-radius:5px;
    border-style:solid;
    height:15px;
    width:15px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-color:transparent transparent var(--vert1) transparent;
    border-width:0 5px 5px 5px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    border-color:transparent transparent var(--vert2) transparent;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
    border-color:var(--vert1) transparent transparent transparent;
    border-width:5px 5px 0 5px;
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    border-color:var(--vert2) transparent transparent transparent;
}
::-webkit-scrollbar {
    box-shadow:inset 0 0 5px var(--shadow);
    width:15px;
}
::-webkit-scrollbar-track {
    border-radius:15px;
    box-shadow:inset 0 0 5px var(--shadow2);
}
::-webkit-scrollbar-thumb {
    background-image:linear-gradient(to right, var(--thumb1), var(--thumb2));
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(to left, var(--thumb1), var(--thumb2));
}

另外，建议给所有元素添加box-sizing: border-box，确保宽度计算包含内边距和边框，避免意外的尺寸偏移：

* {
  box-sizing: border-box;
}

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