如何实现滚动可滚动容器时hr元素固定在指定位置不跟随滚动

核心修改点是将hr的定位方式替换为sticky，它会相对于最近的可滚动父元素（也就是你的侧边栏容器）定位，滚动时会固定在设定位置，不需要依赖全局视口，适配性更强。

修改后代码 #

CSS部分 #

div.sidescroll {
  background-color: #202225;
  height: 96%;
  width: 4%;
  position: absolute;
  overflow-y: auto;
}

/* 可直接复用的hr固定样式类 */
div.sidescroll .sticky-hr {
  width: 50px;
  border-radius: 50px;
  height: 3px;
  margin: 0;
  position: sticky;
  /* 距离滚动容器顶部60px固定，和你原有设置的位置一致 */
  top: 60px;
  /* 水平居中适配侧边栏宽度 */
  left: 50%;
  transform: translateX(-50%);
  border: none;
  background-color: #fff; /* 可自行修改分割线颜色 */
}

HTML部分 #

<div class="sidescroll">
  <!-- 此处放置你的T标识等顶部固定内容 -->
  <hr class="sticky-hr">
  <!-- 此处放置其他需要滚动的服务器图标等内容 -->
</div>

注意事项 #

• hr元素必须放在.sidescroll容器内部，放置在T标识元素的下方即可
• 如果后续调整T标识的高度，只需要修改.sticky-hr的top属性值，匹配T标识的底部坐标即可
• 原有position: fixed的写法是相对于整个浏览器视口定位，侧边栏位置调整时需要同步修改hr的偏移值，适配性差，不推荐使用

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