Сделать Div сфокусированным и видимым в прокручиваемом переполнении - PullRequest
Новая
       37

Сделать Div сфокусированным и видимым в прокручиваемом переполнении

0 голосов
/ 15 марта 2019

Есть ли способ сделать элемент внутри 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>

1 Ответ

0 голосов
/ 15 марта 2019

Используйте 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>
...