Merge pull request #60 from mikejacobson/scroll-active-to-center

Scroll active tab to center rather than minimally within view
mikejacobson · Oct 14, 2018 · 983c0fc · 983c0fc
2 parents 2f1e6f7 + 5bc322d
commit 983c0fc
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-bootstrap-scrolling-tabs",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "main": [
     "./dist/jquery.scrolling-tabs.js",
     "./dist/jquery.scrolling-tabs.css"

diff --git a/dist/jquery.scrolling-tabs.js b/dist/jquery.scrolling-tabs.js
@@ -934,6 +934,9 @@
           activeTabLeftPos,
           activeTabRightPos,
           rightArrowLeftPos,
+          activeTabWidth,
+          leftPosOffset,
+          offsetToMiddle,
           leftScrollArrowWidth,
           rightScrollArrowWidth;
 
@@ -955,13 +958,14 @@
       }
 
       rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
+      activeTabWidth = $activeTab.outerWidth();
 
       /**
        * @author poletaew
        * We need relative offset (depends on $fixedContainer), don't absolute
        */
       activeTabLeftPos = $activeTab.offset().left - stc.$fixedContainer.offset().left;
-      activeTabRightPos = activeTabLeftPos + $activeTab.outerWidth();
+      activeTabRightPos = activeTabLeftPos + activeTabWidth;
 
       rightArrowLeftPos = stc.fixedContainerWidth - rightScrollArrowWidth;
 
@@ -981,13 +985,17 @@
         }
       } else {
         if (activeTabRightPos > rightArrowLeftPos) { // active tab off right side
-          stc.movableContainerLeftPos -= (activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth);
+          leftPosOffset = activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth;
+          offsetToMiddle = stc.fixedContainerWidth / 2;
+          leftPosOffset += offsetToMiddle - (activeTabWidth / 2);
+          stc.movableContainerLeftPos -= leftPosOffset;
           smv.slideMovableContainerToLeftPos();
           return true;
         } else {
           leftScrollArrowWidth = stc.$slideLeftArrow.outerWidth();
-          if (activeTabLeftPos < leftScrollArrowWidth) { // active tab off left side
-            stc.movableContainerLeftPos += leftScrollArrowWidth - activeTabLeftPos;
+          if (activeTabLeftPos < 0) { // active tab off left side
+            offsetToMiddle = stc.fixedContainerWidth / 2;
+            stc.movableContainerLeftPos += (-activeTabLeftPos) + offsetToMiddle - (activeTabWidth / 2);
             smv.slideMovableContainerToLeftPos();
             return true;
           }