title: If the moving tab (active tab) exceeds the scrollbar width,the non active tabs are fluctuating in JQuery?
body: <p>If i  am move the active tab with mousedown and mousedown event to right or left side,if the tab exceeds the scroll width ,the nonactive tabs are get fluctuations.all tabs are assigned as class.the active tab consider as current class. How do i resolve this issue and move the scrollbar smoothly based on tab movement with both left and right side in my Project.</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script
     src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt; 
     &lt;script&gt;
         $(document).ready(function () {
         var limit = $(".limit").innerWidth(); var Right;
          console.log("parent width" + limit);
          var one, two;
          console.log("window width" + window.innerWidth);
          var counts = $(".limit").children().length;
          var singletabwidth = $(".limit").children().width();
          var total = counts * singletabwidth;
          console.log("the total tabs width" + total);
          console.log("single tab width " + singletabwidth);
          var l = $(".limit");
          console.log("the total number of childrens are" + counts); 
          var drag_min_xpos, drag_max_xpos, original_xpos;
          var CursorLeft, CursorRight,Left;
  
         $(".button").mousedown(function (event) {
              if (event.which === 1) {
  
                  var tab_id = $(this).attr('data-tab');
                  $('.tab').removeClass('current');
                  var one = $(this);
                  $('.tab-content').removeClass('current');
                  $(this).addClass('current');
  
                  $("#" + tab_id).addClass('current');
                  var button = $(this);
                  var button_id = button.attr('id');
                  var parent_width = button.parent().innerWidth();
                  var left = parseInt(button.css('left'));
                  original_xpos = button.position().left;
                  Right = original_xpos + $(button).innerWidth;
                   drag_min_xpos = 0 - original_xpos;
          drag_max_xpos = parent_width - original_xpos -  button.outerWidth();
                  var drag_start_xpos = event.clientX;
                  var my_xpos = original_xpos;
                  Left = event.pageX - my_xpos;
                                     $('.button').each(function (i) {
                      $(this).attr('data-order', (i + 1));
                                     });
  
                  var prev_button = button.prev('.button');
                  var next_button = button.next('.button');
                  var prev_button_xpos = prev_button.length &gt; 0 ? prev_button.position().left : '';
                  var next_button_xpos = next_button.length &gt; 0 ? next_button.position().left : '';
  
             $(window).on('mousemove', function (event) {
  
                      console.log("max drag" + drag_max_xpos);
                      console.log("min drag" + drag_min_xpos);
                      console.log("start position" + drag_start_xpos);
  
                      CursorLeft = event.pageX - Left;
                      console.log("cursorLeft=" + CursorLeft);
                      CursorRight = CursorLeft + $(button).width();
                      console.log("cursorRight=" + CursorRight);
                      console.log("scrollx" + window.scroll);
      console.log("documentElement Client Width" + document.body.clientWidth);
                      button.addClass('drag');
                      console.log("Left position" + my_xpos);
       var direction = my_xpos &gt; button.position().left ? 'left' : 'right';
                      var new_left = left + (event.clientX - drag_start_xpos);
                      my_xpos = button.position().left;
                      button.css({ left: new_left + 'px' });
        if (new_left &lt; drag_min_xpos) 
          { 
          button.css({ left: drag_min_xpos + 'px' }); }
        if (new_left &gt; drag_max_xpos) 
         { 
          button.css({ left: drag_max_xpos + 'px' }); }
            if (direction == 'right' &amp;&amp; next_button_xpos != '') {
  
         $(l,".current").scrollLeft(my_xpos);
        if ((my_xpos + 50) &gt; next_button_xpos) {
        next_button.css({ left: (parseInt(next_button.css('left')) -   next_button.outerWidth(true)) + 'px' }); 
      var tmp_order = next_button.attr('data-order');
      next_button.attr('data-order', button.attr('data-order'));
      button.attr('data-order', tmp_order);
      prev_button = next_button;
      next_button = next_button.nextAll('.button:not(.drag)').first();
      prev_button_xpos = prev_button.length &gt; 0 ? prev_button.position().left : '';
      next_button_xpos = next_button.length &gt; 0 ? next_button.position().left : '';
  
     }
    } else if (direction == 'left' &amp;&amp; prev_button_xpos != '') {
      if (my_xpos &lt; (prev_button_xpos + 50)) {
  
     $(".current",l).scrollLeft(drag_min_xpos);
  
     prev_button.css({ left: (parseInt(prev_button.css('left')) +   prev_button.outerWidth(true)) + 'px' });
     var tmp_order = prev_button.attr('data-order');
  
     prev_button.attr('data-order', button.attr('data-order'));
     button.attr('data-order', tmp_order);
     next_button = prev_button;
     prev_button = prev_button.prevAll('.button:not(.drag)').first();
     prev_button_xpos = prev_button.length &gt; 0 ? prev_button.position().left : '';
     next_button_xpos = next_button.length &gt; 0 ? next_button.position().left : '';
    }
     }
      });
  
         $(window).on('mouseup', function (event) {
          dragging = null;
          if (event.which === 1) {
          $(l).stop(AnimationEvent);
          $('.button').removeClass('drag');
          $(window).off('mouseup mousemove');
          one = null; two = null;
          $('.button').each(function () {
          var this_order = parseInt($(this).attr('data-order'));
          var prev_order = $(this).siblings('.button[data-order="' +  (this_order - 1) + '"]');
          if (prev_order.length &gt; 0) { $(this).insertAfter(prev_order); }
                          });
                          $('.button').css('left', '0');              $('.button').removeAttr('data-order');
                      }
                  });
              }
          });
      });                  
  
  &lt;/script&gt;
  &lt;style&gt;
  .limit
      {
       white-space:nowrap;
       overflow-y:hidden;
       overflow-x:scroll;
      }
  .parent {
        position:relative;
        margin: 20px;
        width: 800px;
        height: 40px;
          }
  .button {
         position:relative;
         display: inline;
         width: 200px;
         height: 75px;
         background-color:lightgray;
         font-size:large;
         -webkit-transform: perspective(100px)rotateX(30deg);
         -moz-transform: perspective(100px)rotateX(30deg);
         }
   .button:hover { 
         cursor: default;
         }
   .button:active 
    {
         cursor:move;
         z-index:40;
    }
   .button.drag {
         z-index: 99; 
         background-color:orange;
    }
   .pic
    {
      height:400px;
      width:700px;
    }
    button.current{
    background-color:greenyellow;
    }
   .tab-content{
      margin-top:40px;
      display: none;
      background-color:lightgoldenrodyellow;
      height:450px;
      width:800px;
    }
   .tab-content.current{
      display: inherit;
      position:absolute;
    }
   &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="parent" class="parent"&gt;
   &lt;div class="limit"&gt;
   &lt;button data-tab="tab-1" class="button  current " &gt;Car 1&lt;/button&gt;
   &lt;button data-tab="tab-2" class="button"&gt;Car 2&lt;/button&gt;
   &lt;button data-tab="tab-3" class="button"&gt;Car 3&lt;/button&gt;
   &lt;button data-tab="tab-4" class="button"&gt;Car 4&lt;/button&gt;
   &lt;button data-tab="tab-5" class="button"&gt;Car 5&lt;/button&gt;
   &lt;button data-tab="tab-6" class="button"&gt;Computer&lt;/button&gt;
   &lt;button data-tab="tab-7" class="button"&gt;Message&lt;/button&gt;
   &lt;button data-tab="tab-8" class="button"&gt;Nature&lt;/button&gt;
   &lt;button data-tab="tab-9" class="button"&gt;Power&lt;/button&gt;
   &lt;/div&gt;
   &lt;div id="tab-1" class="tab-content current"&gt;
   &lt;img src="Images/Ford-Mustang.jpg" class="pic" /&gt; Car 1
   &lt;/div&gt;
   &lt;div id="tab-2" class="tab-content" &gt;
   &lt;img src="Images/car%201.jpg" class="pic"/&gt;Car 2
   &lt;/div&gt;
   &lt;div id="tab-3" class="tab-content"&gt;
   &lt;img src="Images/car%202.jpg" class="pic"/&gt; Car 3
   &lt;/div&gt;
   &lt;div id="tab-4" class="tab-content"&gt;
   &lt;img src="Images/car%203.jpg" class="pic"/&gt;Car 4
   &lt;/div&gt;
   &lt;div id="tab-5" class="tab-content"&gt;
   &lt;img src="Images/car%204.jpg" class="pic"/&gt;Car 5
   &lt;/div&gt;
   &lt;div id="tab-6" class="tab-content"&gt;
   &lt;img src="Images/computer.jpg"  class="pic"/&gt;Computer
   &lt;/div&gt;
   &lt;div id="tab-7" class="tab-content"&gt;
   &lt;img src="Images/Message.GIF" class="pic"/&gt;Message
   &lt;/div&gt;
   &lt;div id="tab-8" class="tab-content"&gt;
   &lt;img src="Images/nature.jpg" class="pic"/&gt;Nature
   &lt;/div&gt;
   &lt;div id="tab-9" class="tab-content"&gt;
   &lt;img src="Images/power.jpg" class="pic"/&gt;Power
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>How do i solve this issue.and Run my project successfully?</p>
  
  <p>Issues:-</p>
  
  <p>1.Fluctuations  raises while current tab movement exceeds the scroll width.</p>
  
  <p>2.scroll not moving  with active tab?</p>