Smooth scrolling test (for I-Plan tabs)

by Anton

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="iplan-tabs" style="max-width:200px;">
  <ul class="nav nav-tabs">
    <li class="nav-item"><a href="#" class="nav-link"><span>One Item</span></a></li>
    <li class="nav-item"><a href="#" class="nav-link active"><span>Two Item</span></a></li>
    <li class="nav-item"><a href="#" class="nav-link"><span>Three Item</span></a></li>
    <li class="nav-item"><a href="#" class="nav-link"><span>Four Item</span></a></li>
    <li class="nav-item"><a href="#" class="nav-link"><span>Five Item</span></a></li>
  </ul>
</div>

CSS

.iplan-tabs {
    display: inline-block;
    position: relative;
    z-index: 10; /* To overlap .ip-header-content .disable-panel */
    
    border: solid 1px #ccc; /* To see limits in the fiddle */
}

#ip-page-header .iplan-tabs {
    margin: 0 0 -5px;
}

.iplan-tabs .nav {
    flex-wrap: nowrap;
    border-bottom: none;
    overflow-x: hidden;
    overflow-y: hidden;
}

.iplan-tabs li.nav-item {
    position: relative;
    user-select: none;
}

.iplan-tabs .nav li a > span {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

JavaScript

const tabs = $('.nav-tabs');
//console.log(tabs.prop('scrollWidth'), tabs.outerWidth());
_startScroll(tabs, true, '+=10', tabs.prop('scrollWidth') - tabs.outerWidth())
//tabs.scrollLeft(50);

function _startScroll(tabs, scrollRight, increment, maxScroll) {
	tabs.animate({
    scrollLeft: increment
  }, 100, 'linear', () => {
    if (!_checkAndStop.call(this)) {
      _startScroll(tabs, scrollRight, increment, maxScroll);
    }
  });

  function _checkAndStop() {
    const currScroll = Math.round(tabs.scrollLeft());
    return scrollRight && currScroll >= maxScroll || !scrollRight && currScroll <= 0;
  }
}