滚动指示器

您可以使用一种方法来构建一个进度条，显示用户在页面上滚动到什么位置（就像一个“阅读进度指示器”），而且完全不需要 JavaScript。只需要一些巧妙的渐变和定位用法。

浏览器有一个内置功能来指示您的滚动位置。是这样的：滚动条，它非常有效。现在甚至有标准化的方法来设置滚动条样式。

body {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

您可能想要将这些与 -webkit- 样式组合 才能获得最佳的浏览器支持。例如

html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

但假设您对设置滚动条样式并不感兴趣，您更感兴趣的是构建自己的指示器来显示用户滚动到什么位置。就像一个进度条，当您接近文章的结尾时就会填满。

Mike Riethmuller 找到了一种非常巧妙的方法来实现它！

它不仅很巧妙，而且代码量也很少。为了理解，让我们删除标题的白色背景和主体上的伪元素，这样就能看到所使用的 linear-gradient。

啊哈！一个带有硬停止的斜向渐变。我们已经可以看出这里发生了什么。当页面向下滚动时，您能看到的渐变部分会越来越多的被蓝色填充。然后技巧在于隐藏除一小段渐变之外的所有内容，因此标题上的实色背景和伪元素，它们之间的距离只有几个像素。

也许最巧妙的部分是渐变背景的大小。您可能认为它只是覆盖了整个背景，但事实并非如此。如果这样做，滚动条将永远不会完成，因为它位于页面的顶部，而渐变在页面的底部完成。由于这个演示是在页面中间的位置，因此渐变需要在底部完成几乎一个完整的视窗高度。那看起来像

background-size: 100% calc(100% - 100vh);

除了固定的标题大小会考虑在内，所以需要减去它。最终，代码看起来好像有很多魔法数字。但它们并不完全是魔法数字，因为它们中的大多数在遗传上是相关的。这是一个分支，将它们全部转换成自定义属性，这样您就可以看到这一点。

html {
  --header-size: 125px;
  --scrollbar-height: 3px;
  --scrollbar-bg: #ddd;
  --scrollbar-progress-color: #0089f2;
}
header {
  position: fixed;
  top: 0;
  height: var(--header-size);
  width: 100%;
  background: white;
  padding: 1rem 2rem;
}
main {
  margin-top: calc(var(--header-size) + var(--scrollbar-height));
  padding: 2rem;
}
body {
  background: linear-gradient(
    to right top,
    var(--scrollbar-progress-color) 50%,
    var(--scrollbar-bg) 50%
  );
  background-size: 100%
    calc(100% - 100vh + var(--header-size) + var(--scrollbar-height) + 1px);
  background-repeat: no-repeat;
  margin: 0;
  font-family: "Open Sans", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  top: calc(var(--header-size) + var(--scrollbar-height));
  bottom: 0; width: 100%;
  z-index: -1;
  background: white;
}

为什么要这样做呢？

  • 这很有趣。
  • 某些浏览器根本没有滚动条（比如移动设备，以及 macOS 上的“仅在滚动时显示滚动条”设置）。

如果您想做一些真正花哨的事情，比如显示您在页面上滚动的百分比，或者更花哨的事情，比如显示通过编程方式计算的预计阅读时间，那么这些都是可行的，但是您需要进入 JavaScript 的领域。

© 2024 . All rights reserved.