0

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>

1 respuesta 1

1

Podrias usar scrollIntoView cada vez que seleccionas un nuevo elemento, esto hace que la barra de scroll se mueva hasta que el elemento al que le hiciste scrol sea visible un ejemplo seria lo siguiente:

    const items = [...document.querySelectorAll('.item')]
    let index = 0;

    function selectPrev() {
        removeActive();

        if (index == 0) {
            index = items.length - 1;

            applyActive();
            return;
        }

        index -= 1;
        applyActive()
    }

    function selectNext() {
        removeActive();
        index = (index + 1) % items.length;
        applyActive();
    }

    function applyActive() {
        items[index].classList.add('active');
        items[index].scrollIntoView({ behavior: "smooth", block: "nearest" })
    }

    function removeActive() {
        items[index].classList.remove('active');
    }

    selectNext();
.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">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>

    <button onclick="selectPrev()">Anterior</button>
    <button onclick="selectNext()">Siguiente</button>

ScrollIntoView es muy configurable segun las necesidades que tengas, revisa la documentacion si quieres modificar mas elementos del comportamiento general.

Documentacion de referencia: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.