Visible tab if it is invisible

Question

I made a scrollable tab list and want while user scrolled, when clicked on each tab, scroll go to left of that tab, prefer if tab already invisible (I mean overflowed from screen):

jQuery('.resp-tabs-list li').click(function() {
  var left = Math.round(jQuery(this).offset().left);
  var scroller = jQuery(this).parent();
  scroller
    .animate({
      'scrollLeft': left
    }, 500);
});

ul {
  overflow-x: auto!important;
  overflow-y: hidden!important;
  -webkit-overflow-scrolling: touch!important;
  overflow-scrolling: touch!important;
  -moz-overflow-scrolling: touch!important;
  white-space: nowrap;
  overflow: -moz-scrollbars-none;
}

li {
  display: inline-block;
  padding: 0 10px 0 10px;
  border: 1px solid black;
  width: 50px;
  height: 30px;
  line-height: 30px;
}

div#wrapper {
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <ul class="resp-tabs-list">
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
  </ul>
</div>

What I tried so far, got left offset of each element and scroll to it, but it not working as expected.

Answer 1

I suggest you use absolute positioning instead of actual scroll, that's the only way it'll work as expected for sure and everywhere. Then you can implement a drag functionality or your own scrollbar to move the tabs (I added the drag&drop scrolling functionality).

It's important to note the difference between offset() and position() in jQuery.

(function() {
  var dragging=false,
    lastX=null,
    wrapper=jQuery("#wrapper"), //wrapper and elem are just used as cache
    elem=wrapper.children(".resp-tabs-list"),
    moved=false,
    stopClick=false,
    maxLeft=wrapper.innerWidth()-elem.outerWidth();
    
  wrapper.on("mousedown",function(e) {
    dragging=true;
    moved=false;
    stopClick=false;
    lastX=e.clientX;
  }).on("mouseup mouseleave",function(e) {
    dragging=false;
    //don't stop the click event if user didn't drag (assuming a normal click, you could improve this with a threshold and/or timer)
    if(!moved) return;
    //we can't prevent the click event on the children from mouseup, thus we use stopClick
    stopClick=true;
  }).on("mousemove",function(e) {
    if(!dragging) return;
    
    var d=lastX-e.clientX;
    lastX=e.clientX;
    var left=elem.position().left-d;
    
    //min and max
    if(left>0) left=0;
    else if(left<maxLeft) left=maxLeft;
    
    elem.css("left",left);
    
    if(!moved&&d!=0) moved=true;
  });

  jQuery('.resp-tabs-list li').click(function(e) {
    if(stopClick) {
      stopClick=false;
      e.preventDefault();
      return;
    }
    var left = Math.round(jQuery(this).position().left);
    var scroller = jQuery(this).parent();
    scroller
      .animate({
        'left': -left
      }, 500);
  });

})();

ul {
  overflow-x: auto!important;
  overflow-y: hidden!important;
  -webkit-overflow-scrolling: touch!important;
  overflow-scrolling: touch!important;
  -moz-overflow-scrolling: touch!important;
  white-space: nowrap;
  overflow: -moz-scrollbars-none;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  padding: 0 10px 0 10px;
  border: 1px solid black;
  width: 50px;
  height: 30px;
  line-height: 30px;
}

div#wrapper {
  width: 200px;
  height: 32px;
  overflow: hidden;
  position: relative;
  user-select: none;
  cursor: ew-resize;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <ul class="resp-tabs-list">
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
  </ul>
</div>