Chrome 为什么`ScrollIntoView`不能同时处理两个元素?

rslzwgfq  于 2023-11-14  发布在  Go
关注(0)|答案(3)|浏览(186)

我在页面上有两个溢出的元素,我想同时调用ScrollIntoView来获取它们中的子元素。
以下内容在Firefox中可以正常工作,但在Chrome中不行。这是一个bug吗?

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>
0yg35tkg

0yg35tkg1#

最好使用普通的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>
siotufzp

siotufzp2#

看起来Chrome阻止了2个平滑滚动。将 behavior 改为 auto,滚动就可以了。

aiqt4smr

aiqt4smr3#

我通过设置不同的超时来解决这个问题。在我的例子中,我有两个组件。每个组件在500和1000毫秒时触发。

setTimeout(() => {
  scrollToCard(this.selectedId);
}, this.type === 'first' ? 500 : 1000);

scrollToCard(id: string) {
  const selected = document.getElementById(
    'scrollTo-' + id + '-' + this.type
  );

  if (selected) {
    selected.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'start',
    });
  }
}

字符串

相关问题