Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

140
Vistas
Horizontal scroll on document.Ready to active link with jQuery

How to automatically horizontal scroll to the .active link - full question below the code.

I have this list of div's working horizontal. It decently scrolls horizontal on mobile in Bootstrap 5.

<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSlider">
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/">Luchtreinigers</a> &raquo;</div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-ionisator/">met ionisator</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-bevochtigingsfunctie/">met bevochtigingsfunctie</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="active" href="/luchtreinigers/seo-dir/">HORIZONTAL SCROLL TO THIS ONE</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-allergieen/">voor allergieën</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-astma/">voor astma</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

THE CSS

.nav-scroller {
  position                   : relative;
  z-index                    : 2;
  overflow-y                 : hidden;
  }
.nav-scroller .nav {
  display                    : flex;
  flex-wrap                  : nowrap;
  overflow-x                 : auto;
  color                      : #333;
  text-align                 : left;
  white-space                : nowrap;
  -webkit-overflow-scrolling : touch;
  }

THE QUESTION

I'm trying to find a way that when the page loads, it finds the active class of the link inside #boxSlider (or .row .nav) and automatically does the scrollCenter to it after the page has loaded. Would be a neat feature on mobile devices to point to the current category people have selected when by default it is shown off-screen.

Having tried all sorts of code found on document.Ready so far, the basic idea is this:

$(document).ready(function() {
    $(".nav").scrollCenter("a.active");
});
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

something like that ?

document.querySelector('#boxSlider').scrollLeft = document.querySelector('a.active').closest('div.nav-scroller_box').offsetLeft


/*---


document.querySelector('a.active')
 .closest('div.nav-scroller_box')
 .scrollIntoView({ behavior: 'smooth' })

// or

document.querySelector('#boxSlider').scrollTo(
  {  left     : document.querySelector('a.active').closest('div.nav-scroller_box').offsetLeft
  ,  behavior : 'smooth'
  });

----- */
.nav-scroller {
  position                   : relative;
  z-index                    : 2;
  overflow-y                 : hidden;
  }
.nav-scroller .nav {
  display                    : flex;
  flex-wrap                  : nowrap;
  overflow-x                 : auto;
  color                      : #333;
  text-align                 : left;
  white-space                : nowrap;
  -webkit-overflow-scrolling : touch;
  }
.nav-scroller_box {
  padding : .5em;
  border  : 2px solid lightgrey;
  margin  : .2em;
}
.active {
  color   : red;
  }
<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSlider">
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/">Luchtreinigers</a> &raquo;</div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-ionisator/">met ionisator</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/met-bevochtigingsfunctie/">met bevochtigingsfunctie</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="active" href="/luchtreinigers/seo-dir/">HORIZONTAL SCROLL TO THIS ONE</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-allergieen/">voor allergieën</a></div>
          <div class="col-auto nav-scroller_box p-2 border mb-2"><a class="" href="/luchtreinigers/voor-astma/">voor astma</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda