页面滚动时左侧垂直滚动条反向联动的实现问题求助

原代码的问题在于动画逻辑与需求反向，通过动画延迟模拟进度容易导致不同步。以下是符合需求的修正方案：

核心修改思路 #

• 保留滚动进度计算的JS逻辑，--scroll变量会随页面滚动从0（顶部）线性变化到1（底部）
• 放弃动画模拟，直接用--scroll变量控制滚动条高度，确保完全同步
• 调整滚动条定位为视口固定底部，实现"从下向上反向移动"的效果

修正后完整代码 #

HTML #

<div class="top-line"></div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

CSS #

.top-line {
    width: 7px;
    /* 用滚动进度直接计算高度，初始0%隐藏 */
    height: calc(var(--scroll) * 100%);
    /* 固定在视口左侧底部，确保滚动时位置不变 */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: #f00;
    border-radius: 0;
}

/* 初始化滚动进度变量 */
:root {
    --scroll: 0;
}

JavaScript #

window.addEventListener('scroll', () => {
  // 计算滚动进度：当前滚动距离 / (页面总高度 - 视口高度)
  document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

效果说明 #

• 初始状态：左侧滚动条高度为0%，完全隐藏
• 页面向下滚动时：滚动条从视口底部开始向上逐渐变长，滚动进度与页面滚动完全同步
• 滚动至页面底部时：滚动条高度达到100%，覆盖整个左侧视口高度

内容的提问来源于stack exchange，提问作者Wp-PHP