我的页面上有两个溢出的元素,我想调用 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>
最佳答案
最好使用正常的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>
关于javascript - 为什么 `ScrollIntoView` 不能同时处理两个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66586455/