How to scroll to element in a horizontall scroll?

Question

I have a bootstrap nav which is scrollable horizontally in my website, when i change the nav i would the scroller to follow the selected item so i'm trying to scrollLeft to the left position of the .active nav...

But once the selected nav is out of the scroll width so it's overflowed all breaks and the nav become buggy like this

Here is my code:

const nav = document.querySelector(".menu .nav-scroller .nav");
const tasti = document.querySelector(".tasti");
tasti.addEventListener("touchstart", handleTouchStart, {
  passive: true,
});
tasti.addEventListener("touchmove", handleTouchMove, {
  passive: true
});

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return (
    evt.touches || // browser API
    evt.originalEvent.touches
  ); // jQuery
}

function handleTouchStart(evt) {
  const firstTouch = getTouches(evt)[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
}

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    /*most significant*/
    if (xDiff > 0) {
      var active = $(nav).find(".active");
      if (active.is(":last-child")) {
        return;
      }
      var next = active.next();
      $(next).tab("show");
      /* left swipe */
    } else {
      var active = $(nav).find(".active");
      if (active.is(":first-child")) {
        return;
      }
      var next = active.prev();
      $(next).tab("show");
      /* right swipe */
    }
    $(nav).animate({
      scrollLeft: $(nav).find(".active").position().left
    }, 500); // scrolling here
  }
  /* reset values */
  xDown = null;
  yDown = null;
}

.articoli .menu {
  height: 66px;
}

.nav-scroller {
  position: relative;
  top: 0;
  z-index: 2;
  overflow-y: hidden;
}

.nav-scroller .nav {
  overflow-y: hidden;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.nav-link-search {
  min-width: 125px;
}

.nav-link {
  white-space: nowrap;
}

.tasti {
  height: 200px;
  background: #fafafa;
}





  
    CAFFETTERIAPREFERITI
      RINFRESCHIPRALINERIACONFEZIONI
      TESSERE
      STAGIONALIACCONTO INGROSSO
      VINI
      PIZZAPIZZAPIZZA
  


  SWIPE HERE

So to select another nav the user actually can just press on a nav link or just swipe on the div belowe it, i've added the code only for the swipe...

How to scroll to element in a horizontall scroll?

0 Answers