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

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

Make Div Focused And Visible In Scrollable Overflow

javascript

css

scroll

focus

visible