移动彩虹下划线

我非常喜欢 Sandwich 网站的设计。 在众多漂亮的特性中，这些带有彩虹下划线的标题会在您滚动时移动。 这不是滚动劫持——它只是一个小的设计特性，利用滚动位置来实现一点运动。

要绘制彩虹本身，我们可以使用带有硬停止的线性渐变，与在 CSS 中绘制条纹的概念相同。 这是一个很大的 CSS 代码块，这很好，但我看到他们选择了一个background-image。 这是作为 SVG 的，大小为 661 字节（非常小）。 我们可以通过设置background-size来限制高度并使用background-position将其放置在底部，使其看起来像下划线。

我们将在内联元素上执行此操作，以便下划线在单词断开处断开

h1 {
  span {
    background-image: url(spectrum.svg);
    background-repeat: repeat-x;
    background-size: 100vw 0.2em;
    background-position: left bottom 5px; 
  }
}

要对其进行动画处理，我们移动background-position-x。 这不是一个特别高效的动画处理方法，但我们实际上并没有对其进行动画处理——它只是根据滚动位置移动。 而不是手动操作background-position-x，我们将使用自定义属性设置它，然后使用 JavaScript 操作自定义属性。

background-position-x: var(--scrollPos);

在页面滚动时更新该变量非常简单

window.addEventListener("scroll", e => {
  let scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; 
  let newPos = scrollTop + "px";
  document.documentElement.style.setProperty('--scrollPos', newPos);
});

它正在工作！

查看 CodePen 上 Chris Coyier 的
彩虹下划线（@chriscoyier）
在 CodePen 上。

看到我使用document.body或document.documentElement时那种有点生硬的行吗？ 这是一个愚蠢的跨浏览器问题，其中“滚动元素”在 Safari 中与其他所有浏览器不同。

在执行此操作时，我了解到可以使用document.scrollingElement来避免那里的痛苦。 我将在代码中添加关于此的注释，但保留原始行以备后用。