返回

仅在滚动 `<main>` 元素时填充的滚动进度条

javascript

滚动时在 <main> 中填充滚动进度条

问题

我们希望仅在滚动 <main> 元素时使用原生 JavaScript 显示填充的滚动进度条，进度条的范围为 0-100%，并且仅在该元素被滚动时填充。

解决方案

1. 获取滚动高度和滚动条高度

我们使用 scrollHeight 和 scrollTop 属性来获取 <main> 元素的滚动高度，并使用 clientHeight 属性来获取滚动条的高度。

2. 计算滚动百分比

滚动百分比是滚动条当前位置与可用滚动高度的比值，乘以 100。

3. 更新进度条宽度

我们使用 style.width 属性将进度条的宽度更新为滚动百分比。

实现

const main = document.querySelector('main');
const scrollBar = document.getElementById('scroll-progress');

const updateProgress = () => {
  const scrollHeight = main.scrollHeight;
  const scrollTop = main.scrollTop;
  const clientHeight = main.clientHeight;

  const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;

  scrollBar.style.width = `${scrollPercentage}%`;
};

main.addEventListener('scroll', updateProgress);

CSS

#scroll-progress {
  width: 0%;
  height: 4px;
  background-color: green;
}

结论

通过以上步骤，我们创建了一个滚动进度条，仅在滚动 <main> 元素时填充 0-100%，并且仅当该元素被滚动时才填充。

常见问题解答

1. 如何调整进度条的高度？

编辑 CSS 中的 height 属性，将像素值更改为所需的高度。

2. 如何更改进度条的颜色？

编辑 CSS 中的 background-color 属性，将其更改为所需的十六进制颜色代码或颜色名称。

3. 如何在其他元素中使用此技术？

修改选择器的名称以匹配目标元素，例如 const main = document.querySelector('div')。

4. 如何水平滚动时使用此技术？

使用 scrollLeft 和 scrollWidth 属性代替 scrollTop 和 scrollHeight。

5. 如何在移动设备上使用此技术？

需要一些修改，因为移动设备的滚动事件不同于桌面设备。请参阅以下参考文章：
在移动设备上使用滚动事件