如何实现随页面滚动的圆圈同步彩色线条沿背景线滚动效果

现有带背景线的区块，背景线上的圆圈随页面滚动移动，需添加一条与圆圈同色的线条，跟随圆圈沿背景线同步滚动。

修改后的完整代码 #

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="block1"></div>
<div class="block2">
  <div class="circle"></div>
  <div class="case">
    <div class="row">
      <div class="col-5 text">Text 1</div>
      <div class="col-2"></div>
      <div class="col-5 text">Text 1</div>
    </div>
  </div>
  <div class="case">
    <div class="row">
      <div class="col-5 text">Text 2</div>
      <div class="col-2"></div>
      <div class="col-5 text">Text 2</div>
    </div>
  </div>
  <div class="case">
    <div class="row">
      <div class="col-5 text">Text 3</div>
      <div class="col-2"></div>
      <div class="col-5 text">Text 3</div>
    </div>
  </div>
</div>
<div class="block3"></div>

CSS #

.block1 {
  height: 200px;
  background-color: gray;
}

.block3 {
  height: 600px;
  background-color: gray;
}

.block2 {
  height: 100%;
  position: relative;
  background: linear-gradient(214deg, rgba(79, 142, 255, 0) 0%, #f5e550 10%, #f5e550 90%, rgba(79, 142, 255, 0) 100%) center/3px calc(100% - 100px) no-repeat;
}

/* 新增跟随线条 */
.block2::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background-color: #4f8eff;
  top: 50px;
  bottom: 50px;
  clip-path: inset(0 0 calc(100% - var(--line-height, 0px)) 0);
}

.block2 .circle {
  background: #4f8eff;
  width: 17px;
  height: 17px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}

/* 圆圈内部白色圆心 */
.block2 .circle::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: white;
  border-radius: 50%;
}

.text {
  text-align: center;
  padding: 200px 50px;
}

JavaScript #

const circle = document.querySelector(".circle");
const cases = document.querySelectorAll(".case");
const block2 = document.querySelector(".block2");

circle.style.transition = ""

const handleScroll = () => {
  const { height: blockHeight } = block2.getBoundingClientRect()
  const maxTop = cases[cases.length - 1].offsetTop + cases[cases.length - 1].offsetHeight - 200
  const minTop = cases[0].offsetTop
  let { height: startTop } = cases[0].getBoundingClientRect()
  const scrollDist = Math.min(maxTop, Math.max(startTop / 2 + window.scrollY, minTop))

  circle.style.top = `${scrollDist}px`
  
  // 计算线条显示高度，同步跟随圆圈位置
  const lineHeight = scrollDist - 50; // 50是背景线的顶部偏移量
  block2.style.setProperty('--line-height', `${lineHeight}px`)
}

const handleWindowSizeAndScroll = () => {
  window.removeEventListener("scroll", handleScroll)
  window.removeEventListener("resize", handleScroll)
  window.addEventListener("scroll", handleScroll)
  window.addEventListener("resize", handleScroll)
}

handleScroll()
handleWindowSizeAndScroll()
window.addEventListener("resize", handleWindowSizeAndScroll)

关键修改说明 #

• 给.block2添加::after伪元素作为跟随线条，利用clip-path属性动态裁剪线条显示长度，通过CSS变量--line-height控制裁剪位置
• 重构圆圈的::before伪元素样式，仅保留白色圆心，避免原有样式冲突
• 在滚动处理函数中，计算线条需要显示的高度，通过设置CSS变量同步更新线条裁剪位置，实现和圆圈的同步移动

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