如何通过 Scrollintoview() 查看组的第一个元素？

Question

我正在尝试制作一些简单的按钮来隐藏组中的某些元素，然后制作一些scrollIntoView按钮以在单击时查看这些元素的“第一个”可见实例。 隐藏函数工作正常，但查看函数总是转到同一个类名的最后一个元素。 如何让他们去第一个？ 我对 javascript 没有经验，所以如果我的代码重复太多，我很抱歉。 这是 HTML 部分：

<div class="element1 a">Element 1A</div>
<div class="element1 b">Element 1B</div>
<div class="element1 c">Element 1C</div>

<div class="element2 a">Element 2A</div>
<div class="element2 b">Element 2B</div>
<div class="element2 c">Element 2C</div>

<div class="element3 a">Element 3A</div>
<div class="element3 b">Element 3B</div>
<div class="element3 c">Element 3C</div>


<div class="hide" onclick="hide1()">Hide 1</div>
<div class="hide" onclick="hide2()">Hide 2</div>
<div class="hide" onclick="hide3()">Hide 3</div>

<div class="view" onclick="viewa()">View A</div>
<div class="view" onclick="viewb()">View B</div>
<div class="view" onclick="viewc()">View C</div>

以下函数可以很好地隐藏类 1、2 和 3：

function hide1() {
var i; var div = document.getElementsByClassName("element1");
for (i=0; i<div.length; i++) {div[i].style.display = "none";}
}

function hide2() {
var i; var div = document.getElementsByClassName("element2");
for (i=0; i<div.length; i++) {div[i].style.display = "none";}
}

function hide3() {
var i; var div = document.getElementsByClassName("element3");
for (i=0; i<div.length; i++) {div[i].style.display = "none";}
}

这是我有问题的部分。 当我使用上面的按钮隐藏一个类时，下面的函数总是查看 a、b 或 c 的“最后”可见实例。 我应该如何以简单的方式编辑这部分来查看“第一个”可见实例？

function viewa() {
var i; var div = document.getElementsByClassName("a");
for(i=0; i<div.length; i++){div[i].scrollIntoView({behavior: "smooth"})};
}

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

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

示例：单击“视图 A”按钮时，它会滚动到“元素 3A”，但我希望它滚动到“元素 1A”...当首先单击“隐藏 1”按钮，然后单击“视图 A”时"被点击，然后它再次滚动到“Element 3A”，但这次我希望它滚动到“Element 2A”，因为 Element 1A 现在被隐藏了。

Answer 1

当您触发（例如） viewa函数时，您将遍历所有具有“a”类的元素。 然后在这些元素上触发scrollIntoView函数。 所以你基本上做的是在很短的时间内触发scrollIntoView 3 次，每次都用下一个调用来否决上一个调用。 这解释了为什么它总是关注元素 3A（因为它是 for 循环中的最后一个元素）。

您要做的不是遍历所有元素，而是找到第一个可见元素：

document.querySelector('.a:not([style="display:none"])')

这将找到类“a”的第一个元素，该元素没有"display: none"的样式属性（这是您用来隐藏hide1函数中的元素的hide1 ）。

所以要修复你的代码：

function viewa() {
    let el = document.querySelector('.a:not([style="display:none"])');
    el.scrollIntoView({ behavior: "smooth" })};
}