是否有一种方法可以在div内制作一个元素,该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>
答案 0 :(得分:0)
使用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>