如何仅用CSS实现悬浮于内容上方不占空间的滚动条

要实现滚动条悬浮在内容上方且不占用容器空间的效果，可以通过双层容器嵌套的方案解决，具体实现如下：

核心思路 #

外层容器固定尺寸并设置overflow: hidden，内层容器负责滚动且宽度略大于外层，让滚动条超出外层容器范围，从而悬浮在内容上方，不会挤压内容空间。

修改后的代码 #

CSS 代码 #

/* 外层容器：控制整体尺寸、边框，隐藏超出部分 */
div.container-outer {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

/* 内层容器：负责滚动，宽度比外层宽20px（适配滚动条宽度） */
div.container-inner {
  overflow: auto;
  width: calc(100% + 20px);
  height: 100%;
}

div.item {
  border-bottom: 1px solid black;
}

/* 自定义WebKit内核浏览器滚动条样式 */
::-webkit-scrollbar {    
    width: 8px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #00000055;
    border-radius: 4px;
}

/* 适配Firefox浏览器滚动条 */
@supports (scrollbar-width: thin) {
  .container-inner {
    scrollbar-width: thin;
    scrollbar-color: #00000055 transparent;
  }
}

HTML 代码 #

<div class="container-outer">
  <div class="container-inner">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
  </div>
</div>

关键说明 #

• 外层容器container-outer的overflow: hidden用来裁剪内层容器超出的滚动条部分，同时维持整体的边框和尺寸。
• 内层容器container-inner的额外宽度是为了容纳滚动条，避免滚动条挤压内容区域，可根据实际滚动条宽度调整数值。
• 针对不同内核浏览器做了滚动条样式适配，保证效果一致性。

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