Estoy buscando una solución de seguimiento mediante scroll en horizontal, supongamos que la lista es demasiado larga que necesita un scroll, mi problema es que el .active
class se pierde cuando se tiene un width corto, me gustaría hacer el seguimiento por medio de scroll a la posición activada.
Como puedo mover la scroll al li
con class .active
cada que cambie?.
.items {
width: 120px;
display: flex;
list-style: none;
background: gray;
overflow-x: scroll;
}
.items .item {
padding: 2px;
}
.items .active {
background-color: green;
}
<ul class="items">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
<li class="item">11</li>
<li class="item active">12</li>
<li class="item">13</li>
<li class="item">14</li>
<li class="item">15</li>
<li class="item">16</li>
<li class="item">17</li>
</ul>