如何使用scrollIntoView()滚动到对应分组的第一个可见元素？

问题根因 #

现有滚动功能出错的核心原因是循环给所有匹配类名的元素调用了scrollIntoView方法，后执行的滚动会覆盖之前的滚动效果，因此最终只会定位到循环遍历的最后一个元素。

最小改动方案（仅修改滚动功能代码，无需调整其他逻辑） #

直接修改现有viewa/viewb/viewc函数，遍历匹配元素时判断是否可见，找到第一个可见元素执行滚动后直接终止循环即可：

function viewa() {
  var i; 
  var div = document.getElementsByClassName("a");
  for(i=0; i<div.length; i++){
    // 判断元素是否为可见状态
    if(div[i].style.display !== "none") {
      div[i].scrollIntoView({behavior: "smooth"});
      // 找到第一个符合要求的元素后直接退出循环，不再向后遍历
      break;
    }
  }
}

function viewb() {
  var i; 
  var div = document.getElementsByClassName("b");
  for(i=0; i<div.length; i++){
    if(div[i].style.display !== "none") {
      div[i].scrollIntoView({behavior: "smooth"});
      break;
    }
  }
}

function viewc() {
  var i; 
  var div = document.getElementsByClassName("c");
  for(i=0; i<div.length; i++){
    if(div[i].style.display !== "none") {
      div[i].scrollIntoView({behavior: "smooth"});
      break;
    }
  }
}

冗余代码优化方案（推荐） #

现有隐藏、滚动函数逻辑完全重复，仅参数不同，可以合并为通用函数，大幅精简代码，后续维护也更方便：

第一步：修改HTML按钮绑定逻辑，传入动态参数 #

<!-- 隐藏按钮传入对应分组类名 -->
<div class="hide" onclick="hideGroup('element1')">Hide 1</div>
<div class="hide" onclick="hideGroup('element2')">Hide 2</div>
<div class="hide" onclick="hideGroup('element3')">Hide 3</div>

<!-- 滚动按钮传入对应目标类名 -->
<div class="view" onclick="scrollToFirstVisible('a')">View A</div>
<div class="view" onclick="scrollToFirstVisible('b')">View B</div>
<div class="view" onclick="scrollToFirstVisible('c')">View C</div>

第二步：替换原有所有JS函数为两个通用函数 #

// 通用隐藏指定分组元素
function hideGroup(groupClass) {
  const elements = document.getElementsByClassName(groupClass);
  for(let i = 0; i < elements.length; i++) {
    elements[i].style.display = "none";
  }
}

// 通用滚动到指定类名的第一个可见元素
function scrollToFirstVisible(targetClass) {
  const elements = document.getElementsByClassName(targetClass);
  for(let i = 0; i < elements.length; i++) {
    if(elements[i].style.display !== "none") {
      elements[i].scrollIntoView({behavior: "smooth"});
      break;
    }
  }
}

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