自定义滚动条定位：半透明标题栏遮挡滚动条的解决方案咨询

我有一个class为parent的div，包含两个子元素div.title和div.body：

• div.body支持Y轴方向滚动
• div.title通过absolute定位固定在div.parent顶部，要求保持半透明状态

当前问题：滚动条的顶部部分被div.title遮挡（原截图显示滚动条顶部被半透明标题覆盖）。

相关代码如下：

CSS代码 #

* {
  font-family: sans-serif;
  box-sizing: border-box;
}
div.parent {
  width: 200px;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  position: relative;
}
div.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 20;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  background: rgba(0, 50, 200, 0.3);
  color: rgb(0, 50, 200);
  border-radius: 8px 8px 0 0;
}
div.body {
  padding-top: 60px;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
div.component {
  height: 60px;
  background: black;
  margin: 10px;
}

HTML代码 #

<div class="parent">
  <div class="title">This is title</div>
  <div class="body">
    <div class="component"></div>
    <div class="component"></div>
    <div class="component"></div>
    <div class="component"></div>
    <div class="component"></div>
  </div>
</div>

需求：能否实现滚动条从标题底部开始显示（原目标截图效果），同时保留div.title的半透明效果？

可以实现，只需调整div.body的定位规则，避免滚动条被标题遮挡，同时保留标题的半透明和固定定位效果。

修改后的代码 #

CSS代码 #

* {
  font-family: sans-serif;
  box-sizing: border-box;
}
div.parent {
  width: 200px;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  position: relative;
  overflow: hidden; /* 新增：限制内部滚动条不超出父容器 */
}
div.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 20;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  background: rgba(0, 50, 200, 0.3);
  color: rgb(0, 50, 200);
  border-radius: 8px 8px 0 0;
}
div.body {
  padding-top: 20px; /* 调整：去掉标题高度的偏移，只保留内容间距 */
  overflow-y: scroll;
  position: absolute;
  top: 40px; /* 修改：从标题底部开始定位，避免滚动条被遮挡 */
  left: 0;
  right: 0;
  bottom: 0;
}
div.component {
  height: 60px;
  background: black;
  margin: 10px;
}

HTML代码（无需修改） #

<div class="parent">
  <div class="title">This is title</div>
  <div class="body">
    <div class="component"></div>
    <div class="component"></div>
    <div class="component"></div>
    <div class="component"></div>
    <div class="component"></div>
  </div>
</div>

修改说明 #

1. 给div.parent添加overflow: hidden：确保内部滚动条不会超出父容器的圆角范围，同时避免滚动条溢出到标题区域上方
2. 调整div.body的top值为40px（与标题高度一致）：让滚动条从标题底部开始显示，彻底避免被标题遮挡
3. 把div.body的padding-top从60px改为20px：保持内容与标题的原有间距，同时避免内容被标题覆盖

修改后，滚动条将完全显示在标题下方，同时div.title的半透明效果和固定定位属性完全保留，内容滚动时标题始终固定在顶部。

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