为什么“ScrollIntoView”不能同时作用于两个元素？

Question

我的页面上有两个溢出的元素，我想同时调用ScrollIntoView 来获取它们中的子元素。

以下内容适用于 Firefox，但不适用于 Chrome。这是一个错误吗？

const button = document.querySelector('button');
const one = document.querySelector('.one');
const two = document.querySelector('.two');

button.addEventListener('click', () => {
    one.scrollIntoView({ block: 'center', behavior: 'smooth' });
    two.scrollIntoView({ block: 'center', behavior: 'smooth' });
});

body {
    text-align: center;
}

#container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    height: 130px;
}

#container > div {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid black;
}

button {
    font-size: 1.5rem;
    margin: 0.5rem auto;
}

<div id="container">
    <div>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1 class="one">Boo!</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
    </div>

    <div>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1 class="two">Boo!</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
    </div>
</div>

<button>click to scroll</button>

Answer 1

平滑滚动最好使用普通的scrollTo()滚动方式。

我必须使用 for {}，因为我指的是 #container 内的可滚动 div 集合：

const container_div = document.querySelectorAll("#container > div");

另外，我为两个<h1> 控制标签指定了相同的类：

const text = document.querySelectorAll(".boo");

const button = document.querySelector("button");
const container_div = document.querySelectorAll("#container > div");
const text = document.querySelectorAll(".boo");

button.addEventListener("click", () => {
    for (i = 0; i < container_div.length; i++) {
        container_div[i].scrollTo({ top: text[i].offsetTop, behavior: "smooth" });
    }
});

body {
    text-align: center;
}

#container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    height: 130px;
}

#container > div {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid black;
}

button {
    font-size: 1.5rem;
    margin: 0.5rem auto;
}

<div id="container">
    <div>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1 class="boo">Boo!</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
    </div>

    <div>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1 class="boo">Boo!</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
        <h1>...</h1>
    </div>
</div>

<button>click to scroll</button>

Answer 2

似乎 Chrome blocks 2 同时平滑滚动。将 behavior 更改为 auto 并且滚动将起作用。