有没有一种方法可以在 div 中创建一个元素,该元素是要滚动的元素列表。我的尝试没有成功,因为它确实使元素聚焦但它不会可见,因为我仍然必须向下滚动才能查看元素。
<style>
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
</style>
<div id="list">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item focus">Item I Want Focused</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
最佳答案
使用Element.scrollIntoView()
使焦点元素可见:
const focused = document.querySelector('.focus')
focused.scrollIntoView({ behavior: 'smooth' })
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
<div id="list">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item focus">Item I Want Focused</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
关于javascript - 使 Div 在可滚动溢出中聚焦并可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55188703/