我在页面上有两个溢出的元素,我想同时调用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>
3条答案
按热度按时间0yg35tkg1#
最好使用普通的
scrollTo()
滚动方法和平滑滚动。我不得不使用
for {}
,因为我指的是#container
中的可滚动div集合:字符串
另外,我为两个
<h1>
控制标记指定了相同的类:型
siotufzp2#
看起来Chrome阻止了2个平滑滚动。将 behavior 改为 auto,滚动就可以了。
aiqt4smr3#
我通过设置不同的超时来解决这个问题。在我的例子中,我有两个组件。每个组件在500和1000毫秒时触发。
字符串