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

Question

我正在尝试制作一些简单的按钮来隐藏组中的某些元素，然后制作一些 scrollIntoView 按钮以在单击时查看这些元素的“第一个”可见实例。隐藏函数工作正常，但查看函数总是转到具有相同 class 名称的最后一个元素。如何让他们去第一个？我没有使用 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>

以下函数可以很好地隐藏 classes 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";}
}

这是我遇到问题的部分。当我使用上面的按钮隐藏 class 时，下面的函数总是查看 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"})};
}

示例： 单击“View A”按钮时，它会滚动到“Element 3A”，但我希望它滚动到“Element 1A”... 当首先单击“隐藏 1”按钮，然后单击“查看 A”时，它会再次滚动到“元素 3A”，但这次我希望它滚动到“元素 2A”，因为现在元素 1A 已隐藏.

Answer 1

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

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

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

这会找到第一个带有 class “a” 且样式属性不是 "display: none;" 的元素（这就是您用来隐藏 hide1函数）。

所以要修复您的代码：

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

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

How to view the first element of the group via Scrollintoview()?

javascript

html

js-scrollintoview