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");
});

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>