如何用JavaScript实现基于Div滚动而非窗口滚动的进度条功能？

没问题！要把进度条改成基于指定Div的滚动状态更新，其实只需要把原来监听窗口滚动的逻辑，换成监听目标Div的滚动事件，同时调整计算滚动百分比的参数就行。我帮你调整代码，一步步说清楚：

核心修改点 #

• 把滚动事件的监听对象从$(window)换成你的目标Div（比如假设目标Div的ID是#targetDiv，记得换成你实际的选择器）
• 计算滚动百分比时，用目标Div自身的滚动属性替代原来的文档和窗口属性

修改后的完整代码 #

// 替换成你实际的目标Div选择器，比如#article-container、.scrollable-content等
$("#targetDiv").scroll(function () {
  // 获取当前Div的滚动距离
  const scrollTop = $(this).scrollTop();
  // 目标Div的总内容高度（包括超出可视区域的部分）
  const scrollHeight = $(this)[0].scrollHeight;
  // 目标Div的可视区域高度
  const clientHeight = $(this)[0].clientHeight;

  // 处理边界：如果内容没超出可视区域，直接设为100%
  if (scrollHeight - clientHeight === 0) {
    $("#progressbar").attr('value', 100);
    return;
  }

  // 计算滚动百分比：(已滚动距离 / 可滚动的总距离) * 100
  const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;

  // 给进度条赋值，确保不超过100%
  $("#progressbar").attr('value', Math.min(scrollPercent, 100));
});

额外注意事项 #

• 确保你的目标Div设置了overflow: auto或overflow: scroll样式，否则它不会产生滚动条，事件也不会触发
• 如果你的进度条是用自定义Div模拟的（不是HTML5的<progress>标签），那需要把attr('value', ...)改成设置宽度，比如：$("#progressbar").css('width', Math.min(scrollPercent, 100) + '%')
• 初始化时可以手动触发一次滚动事件，避免进度条初始值为0：$("#targetDiv").trigger('scroll')

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