我有这种情况需要将元素滚动到视口中.问题是我不知道哪个元素是可滚动的.例如,在Portrait中,body是可滚动的,而在Landscape中它是另一个元素(并且有更多情况可以改变可滚动元素)
现在的问题是,给定一个需要滚动到视口中的元素,找到第一个可滚动父级的最佳方法是什么？
我在这里设置了一个演示.使用按钮,您可以在两种不同的情况之间切换
<div class="outer">
<div class="inner">
<div class="content">
...
<span>Scroll me into view</span>
</div>
</div>
</div>
身体是可滚动的或 .outer
有什么建议 ？
element.scrollIntoView行为设置为smooth在 Chrome 中无法正常工作。当它仅用于调用堆栈中的一个元素时，它工作正常。但是如果它用于多个元素，则只有最后一个元素会实际滚动。
这在 Firefox 中运行良好。Chrome 中是否有解决方法？
const $ = (s) => document.querySelector(s)
const $$ = (s) => document.querySelectorAll(s)
const container = $(".container")
for (let i = 0; i < 2; i++) {
document.body.appendChild(container.cloneNode(true))
}
function scrollIntoView(behavior) {
for (const element of $$(".reveal")) {
element.scrollIntoView({
behavior,
block: "end"
})
}
}
$(".instant").addEventListener("click", () => scrollIntoView("instant"))
$(".smooth").addEventListener("click", () => scrollIntoView("smooth"))
$(".reset").addEventListener("click", () => {
for (const element of $$(".container")) {
element.scrollTo(0, 0)
}
}).container {
max-height: calc(33vh …