如何让进度条随Div滚动而非窗口滚动？

没问题，我帮你把原本监听窗口滚动的进度条逻辑，改成监听指定Div的滚动状态～先理清楚核心逻辑的变化：原来的代码是基于window和document的属性计算滚动百分比，现在只需要把这些属性替换成目标Div对应的属性即可。

修改后的完整代码示例 #

假设你的目标Div选择器是#target-scroll-div，进度条元素是#progress-bar，代码如下：

// 监听指定Div的滚动事件
$('#target-scroll-div').scroll(function() {
  // 获取目标Div的滚动距离
  const scrollTop = $(this).scrollTop();
  // 获取Div内容的总高度（包括不可见部分）
  const divContentHeight = $(this)[0].scrollHeight;
  // 获取Div的可视高度
  const divVisibleHeight = $(this).height();
  
  // 计算滚动百分比（避免内容高度小于可视高度时的除以0问题）
  const scrollPercent = divContentHeight > divVisibleHeight 
    ? (scrollTop / (divContentHeight - divVisibleHeight)) * 100 
    : 0;
  
  // 更新进度条的宽度
  $('#progress-bar').css('width', `${scrollPercent}%`);
});

关键注意事项 #

• 替换#target-scroll-div为你实际要监听的Div选择器（可以是id、class或者其他合法选择器）
• 必须给目标Div设置overflow: auto或overflow: scroll样式，否则Div不会出现滚动条，也不会触发滚动事件
• 加入了divContentHeight > divVisibleHeight的判断，避免当Div内容高度小于可视高度时，出现百分比计算错误的情况

对比原代码的核心变化 #

• 把$(window).scroll()换成了目标Div的滚动监听
• 把$(window).scrollTop()换成了目标Div的scrollTop()
• 把$(document).height()（文档总高度）换成了Div的scrollHeight（内容总高度）
• 把$(window).height()（窗口可视高度）换成了Div的height()（Div可视高度）

这样修改后，进度条就会跟着指定Div的滚动状态实时更新啦～

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