如何使用 JS、HTML 和 CSS 轻松制作滚动指示条并进行解释🖱️

🔍 概述

HTML

JavaScript

CSS

✔️ 结束

你很可能遇到过一些网站，它们通常位于页眉处，会随着页面滚动而增大或减小。所以，这篇文章就是关于这个的。

🔍 概述

基本上，我们想要做的是检查滚动相对于页面内容大小的位置，因此如果用户已经滚动到内容的中间，则该栏应该满足 50%，依此类推，始终跟踪并应用数学来实现这一点。

HTML

将栏放入 HTML 主体后，就像上面的 codepen 示例一样，添加一些内容以便在滚动时能够看到一些效果。

<div class='scroll-bar-wrapper'> 
  <div class='scroll-bar'> </div>
</div>

JavaScript

window.addEventListener('scroll',()=> indicateScrollBar())

function indicateScrollBar() {
const distanceFromPageTop = document.body.scrollTop || document.documentElement.scrollTop;

const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

const scrolled = (distanceFromPageTop / height) * 100;

document.querySelector(".scroll-bar").style.width =  `${scrolled}%`;

} 

• 在 .js 文件中，window.addEventListener('scroll',()=> indicateScrollBar())每当用户在窗口中向下或向上滚动时，indicateScrollBar()就会调用该方法。

• 在这个函数中，我们首先遇到distanceFromPageTop，一个将接收document.body.scrollTop或 的变量document.documentElement.scrollTop。如果第一个变量不存在、浏览器无法识别，或者为假值，则第二个变量将保留给该变量，正如||它们中间的逻辑或 (Logical OR) 所解释的那样。几乎所有浏览器都会考虑第一个变量，它是一个属性，它返回一个数字，表示距离顶部的像素数。 和document.body.scrollTop的区别document.documentElement.scrollTop仅仅在于，后者处理整个 HTML 文档，而前者处理正文本身。在这种情况下，它不会影响使用哪一个。

• 另一个变量 so 被声明为：height。它将接收 的结果document.documentElement.scrollHeight - document.documentElement.clientHeight。但是这个表达式到底是什么意思呢？

document.documentElement.scrollHeight给我们一个表示 HTML 文档高度的数字，这是我们在滚动卡在底部之前可以得到的最大数字，即全部内容。

document.documentElement.clientHeight给我们一个数字，指的是我们可以看到的 HTML 文档的高度，这是可见的。

• scrolled是另一个接收表达式的变量(distanceFromPageTop / height) * 100，它将为我们提供最终的数字。

• 最后，我们通过 DOM 获取条形，并将这个最终数字应用为条形的宽度，不要忘记添加 % 信号。

clientHeight和之间的区别说明scrollHeight

CSS

.scroll-bar-wrapper {
  width: 100%;
  height:10px;
  position:fixed;
  top:0;
  left:0;
  background:#CCCCCC;
}

.scroll-bar { 
  width:0;
  height: inherit;
  background: #8D7ECA;
}

现在，我们在 .css 文件中设置栏的样式。栏包装器覆盖 100% 的屏幕，并固定在顶部，因此即使滚动屏幕，它也能显示。此外，.scroll-bar可视化栏本身的 初始值为width:0，因为它会随着用户滚动而变化。此外，它的高度与包装器、父级高度相同，颜色也相同，以使所有内容都可视化。

你可以创建很多不同的样式。这只是一个包含基本内容的示例。例如，你可以将 bar 设置为 的伪元素main，这样就避免直接使用 HTML 代码了，就像这样：

✔️ 结束

希望你觉得它有趣或者学到一些东西。再见！👋