Horizontal scroll on document.Ready to active link with jQuery

Question

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.


  
    
      
        
          Luchtreinigers »
          met ionisator
          met bevochtigingsfunctie
          HORIZONTAL SCROLL TO THIS ONE
          voor allergieën
          voor astma

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

user_10669010 · Answer

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


  
    
      
        
          Luchtreinigers »
          met ionisator
          met bevochtigingsfunctie
          HORIZONTAL SCROLL TO THIS ONE
          voor allergieën
          voor astma

Horizontal scroll on document.Ready to active link with jQuery

1 Answers