如何将自定义滚动条样式应用于div而非body？

嘿Betty，我看了你的代码，问题确实出在JavaScript部分——你现在的逻辑是监听整个窗口的滚动事件，计算的是body的滚动高度，但你的.content才是实际的滚动容器对吧？咱们把代码改成针对这个容器来处理就好啦。

问题核心 #

当前代码里：

• totalHeight用的是document.body.scrollHeight - window.innerHeight，这是计算body的可滚动高度
• 监听的是window.onscroll，也就是窗口滚动时才触发

但你的滚动内容是在.content里，所以得把目标切换到这个容器上。

修改后的完整JavaScript代码 #

// 获取滚动容器和进度条元素
const contentContainer = document.querySelector('.content');
const progress = document.getElementById('progressbar');

// 计算容器的可滚动总高度：容器内容总高度 - 容器自身可见高度
const totalHeight = contentContainer.scrollHeight - contentContainer.clientHeight;

// 监听容器的scroll事件，而不是window的
contentContainer.onscroll = function() {
  // 用容器的scrollTop（已滚动距离）计算进度百分比
  const progressHeight = (contentContainer.scrollTop / totalHeight) * 100;
  progress.style.height = progressHeight + "%";
}

额外注意事项 #

• 确保你的.content容器在CSS里设置了overflow: auto或者overflow-y: scroll，这样它才会成为独立的滚动容器，而不是让内容溢出到body：

.content {
  /* 保留你原有样式 */
  overflow-y: auto;
  /* 建议设置固定高度或最大高度，否则容器会被内容撑开，不会出现滚动条 */
  max-height: 100vh; /* 示例：占满视口高度 */
}

• 另外你的CSS里#scrollpath的拼写要注意，HTML里是id="scrollPath"（驼峰写法），CSS里写成了全小写的#scrollpath，这会导致样式不生效，记得改成一致的#scrollPath哦。

这样修改后，进度条就会跟着.content容器的滚动同步更新啦，试试吧！

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