如何通过JS保持滚动时导航链接动画下划线激活状态

问题背景 #

已实现鼠标hover导航链接时的动画下划线效果，现有滚动监听JS可在对应section进入视口时给导航链接添加current类、离开时移除该类，该逻辑在控制背景色等简单样式时运行正常，但无法让激活状态的导航链接持续显示下划线，自行修改CSS时容易破坏原有hover动画效果。

现有滚动监听JS代码：

window.onscroll = function() {
    var navlinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
    var sections = document.getElementsByTagName('main')[0].getElementsByTagName('section');
    for (var s = 0; s < sections.length; s++) {
        var sectTop = sections[s].offsetTop - 1;
        var sectBot = sections[s].offsetTop+sections[s].offsetHeight - 1;
        if (window.scrollY >= sectTop && window.scrollY < sectBot) {
            navlinks[s].classList.add('current');
        } else {
            navlinks[s].classList.remove('current');
        }
    }
}

现有下划线CSS代码：

nav div a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 2vh;
    left: 0;
    background-color: #02081a;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

nav div a:hover::before {
    transform: scaleX(1);
}

解决方法 #

不需要修改现有JS逻辑，也不需要调整原有下划线基础样式和hover样式，只需要新增一条CSS规则，让带current类的导航链接的伪元素和hover状态保持相同的缩放值即可，完全复用原有过渡动画，不会打乱现有效果：

nav div a:hover::before,
nav div a.current::before {
    transform: scaleX(1);
}

排错提示 #

• 如果加上规则后下划线位置偏移，请检查导航链接nav div a是否设置了position: relative——当前下划线伪元素用了绝对定位，默认会相对于最近的非static定位祖先元素偏移，给链接本身加上相对定位即可固定下划线位置：

  nav div a {
      position: relative;
  }
  

• 如果需要区分hover状态和激活状态的下划线样式，可以单独给.current::before配置不同的颜色、缩放原点等属性，不会影响原有hover动画的运行。

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