Cómo desplazarse horizontalmente automáticamente al enlace .active: pregunta completa debajo del código.
Tengo esta lista de trabajo horizontal de div. Se desplaza horizontalmente decentemente en dispositivos móviles en 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> »</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>EL 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; }LA PREGUNTA
Estoy tratando de encontrar una manera de que, cuando se cargue la página, encuentre la clase activa del enlace dentro de #boxSlider (o .row .nav) y automáticamente haga scrollCenter después de que se haya cargado la página. Sería una buena característica en los dispositivos móviles para señalar la categoría actual que la gente ha seleccionado cuando, de forma predeterminada, se muestra fuera de la pantalla.
Habiendo probado todo tipo de código encontrado en el documento. Listo hasta ahora, la idea básica es esta:
$(document).ready(function() { $(".nav").scrollCenter("a.active"); });algo como eso ?
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> »</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>