如何使div滚动条偏离边框并设置为其高度的80%？

针对Chrome、Edge等webkit内核浏览器，可通过以下样式调整实现需求：

1. 解决滚动条紧贴边框：给容器添加右侧内边距，拉开内容区与滚动条的间距；
2. 调整滚动条高度为容器的80%：通过给滚动条轨道设置上下内边距，限制滑块（thumb）的显示范围——webkit垂直滚动条的height属性无效，需用此方式替代。

修改后的完整CSS代码：

/* 给容器添加右侧内边距，避免滚动条紧贴内容边框 */
.container {
  padding-right: 10px;
  overflow: scroll;
}

.container::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--white50);
  /* 上下内边距，让滑块仅占轨道中间80%高度 */
  padding: calc(10% - 4px) 0;
  /* 减去4px是抵消滑块透明边框宽度，保证高度精准 */
}

.container::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
}

.container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--white);
  /* 透明边框配合轨道内边距，避免滑块超出轨道范围 */
  border: 4px solid transparent;
  background-clip: content-box;
}

关键样式说明： #

• padding-right: 10px：给容器内容区右侧留空，滚动条会显示在该区域，不再紧贴内容边框；
• padding: calc(10% - 4px) 0：轨道上下各设置10%内边距，减去4px抵消滑块透明边框宽度，确保滑块总高度为容器的80%；
• border: 4px solid transparent + background-clip: content-box：让滑块背景仅填充内容区域，配合轨道内边距实现滑块居中且高度符合预期的效果。

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