如何为指定div实现滚动进度条（替换全站滚动进度逻辑）

我明白你想把全局滚动进度条改成只针对特定容器生效的需求，之前直接替换$(window)或$(document)没成功，主要是因为容器的滚动逻辑和全局窗口的计算方式不一样。下面是调整后的完整方案：

核心思路调整 #

原来的代码是基于整个文档窗口的滚动计算，换成容器后，需要关注这几个关键点：

• 监听目标容器的scroll事件，而非全局窗口的
• 计算容器内部可滚动的内容高度（内容总高度减去容器自身的可视高度）
• 用容器的滚动距离（scrollTop）来计算进度比例

修改后的代码 #

// 获取目标容器和进度条元素
const $container = $('#scroll-progress-begins-here');
const $progressBar = $('.scroll-line');

// 监听容器的滚动事件
$container.scroll(function() {
    // 容器已滚动的距离
    const scrollTop = $container.scrollTop();
    // 容器内容的总高度（包括不可见部分）
    const contentHeight = $container[0].scrollHeight;
    // 容器自身的可视高度
    const containerHeight = $container[0].clientHeight;
    // 计算可滚动的总高度（内容总高度 - 容器可视高度）
    const scrollableHeight = contentHeight - containerHeight;

    // 计算滚动进度比例（避免内容不足时出现除以0的错误）
    const scrolled = scrollableHeight > 0 ? (scrollTop / scrollableHeight) * 100 : 0;

    // 更新进度条宽度
    $progressBar.css('width', `${scrolled}%`);
});

关键注意事项 #

• 确保目标容器设置了滚动属性：给#scroll-progress-begins-here添加CSS样式，让它可以滚动，否则容器不会出现滚动条，进度条也无法生效：

  #scroll-progress-begins-here {
      max-height: 600px; /* 可根据你的布局调整为固定height或其他值 */
      overflow-y: auto; /* 当内容超过容器高度时显示垂直滚动条 */
  }
  

初始化进度条状态 #

如果需要页面加载时就同步进度条的初始状态，可以在页面加载完成后手动触发一次滚动事件：

$(document).ready(function() {
    $container.trigger('scroll');
});

这样调整后，进度条就只会跟随目标容器的滚动来更新进度，不再受全局页面滚动的影响啦。

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