在可滚动溢出中使Div聚焦和可见

Question

有没有办法在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>

Answer 1

使用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>