如何根据scrollPosition滚动位置动态修改border-right高度

核心逻辑说明 #

• 元素的border-right默认和元素自身高度完全绑定，不需要单独给边框设置高度属性，只要修改元素本身高度，右侧边框会自动同步变化，天然满足你要的同步增长效果。
• 你预设的高度计算公式完全可行，核心就是监听页面滚动事件，实时拿到纵向滚动值代入公式计算当前高度，再赋值给目标元素即可。

可直接运行的实现代码 #

首先写基础结构与样式，注意给高度加短时长过渡避免变化生硬：

<style>
.target-box {
  width: 180px;
  height: 60px; /* 匹配要求的初始高度 */
  border-right: 3px solid #165DFF;
  background: #f5f7fa;
  /* 按需决定是否固定位置，不需要固定可以删掉下面三行 */
  position: fixed;
  top: 24px;
  left: 24px;
  /* 平滑过渡核心，时长控制在0.1s左右不会有拖滞感 */
  transition: height 0.1s ease-out;
}
/* 撑出页面滚动条，测试用，实际项目替换成自身页面内容即可 */
.test-content {
  height: 4000px;
}
</style>

<div class="target-box"></div>
<div class="test-content"></div>

然后写入交互逻辑，系数可以根据你要的增长速度自行调整：

const targetBox = document.querySelector('.target-box')
// 你提到的极小系数，数值越大高度随滚动增长越快，按需调整
const SCROLL_GROW_RATE = 0.12
const BASE_HEIGHT = 60

// 滚动监听，加requestAnimationFrame优化性能，避免滚动掉帧
let isUpdating = false
window.addEventListener('scroll', () => {
  if (isUpdating) return
  window.requestAnimationFrame(() => {
    const scrollTop = window.scrollY
    // 代入公式计算高度，Math.min是可选的高度上限，不需要可以删掉，示例设的最高500px
    const currentHeight = Math.min(BASE_HEIGHT + scrollTop * SCROLL_GROW_RATE, 500)
    targetBox.style.height = `${currentHeight}px`
    isUpdating = false
  })
  isUpdating = true
})

可选调整提示 #

• 不需要限制最大高度的话，直接去掉代码里的Math.min包裹，直接写const currentHeight = BASE_HEIGHT + scrollTop * SCROLL_GROW_RATE即可
• 觉得平滑度不够可以微调transition的时长，建议不要超过0.2s，否则滚动停下后元素还在缓慢变高，体验会很拖沓
• 需要兼容极老旧浏览器的话，把window.scrollY替换成window.pageYOffset || document.documentElement.scrollTop即可，现代浏览器不需要做这个兼容

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