Scroll horizon on Nav-tabs component (bootstrap 4)

Asked

Viewed 126 times

1

I added a scroll horizontal on the component nav-tabs of bootstrap 4.

Now I want the scroll function automatically if I click the last tab visível, and show the next tab that is off the display.

This link shows you what I intend to do

It is possible to do this with javascript ?

<!DOCTYPE html>
<html lang="es">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Juan Diego Torres Castillo">
      <title>Bootstrap Init Template</title>
      <!-- Boostrap CSS & Icons -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   </head>
   <body>
      <style>
         .nav-tabs {
         z-index: 1;
         position: relative;
         /* scroll */
         overflow-x: auto !important;
         overflow-y:hidden !important; 
         flex-wrap: nowrap !important;
         }
      </style>
      <h1>Template Boostrap</h1>
      <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item">
            <a href="#tab1" class="nav-link" data-toggle="tab">Tab 1</a>
         </li>
         <li class="nav-item">
            <a href="#tab2" class="nav-link  active" data-toggle="tab">Tab 2</a>
         </li>
         <li class="nav-item">
            <a href="#tab3" class="nav-link" data-toggle="tab">Tab 3</a>
         </li>
         <li class="nav-item">
            <a href="#tab4" class="nav-link" data-toggle="tab">Tab 4</a>
         </li>
         <li class="nav-item">
            <a href="#tab5" class="nav-link" data-toggle="tab">Tab 5</a>
         </li>
         <li class="nav-item">
            <a href="#tab6" class="nav-link" data-toggle="tab">Tab 6</a>
         </li>
         <li class="nav-item">
            <a href="#tab7" class="nav-link" data-toggle="tab">Tab 7</a>
         </li>
         <li class="nav-item">
            <a href="#tab8" class="nav-link" data-toggle="tab">Tab 8</a>
         </li>
         <li class="nav-item">
            <a href="#tab9" class="nav-link" data-toggle="tab">Tab 9</a>
         </li>
         <li class="nav-item">
            <a href="#tab10" class="nav-link" data-toggle="tab">Tab 10</a>
         </li>
         <li class="nav-item">
            <a href="#tab11" class="nav-link" data-toggle="tab">Tab 11</a>
         </li>
         <li class="nav-item">
            <a href="#tab12" class="nav-link" data-toggle="tab">Tab 12</a>
         </li>
         <li class="nav-item">
            <a href="#tab13" class="nav-link" data-toggle="tab">Tab 13</a>
         </li>
      </ul>
      <div class="tab-content">
         <div id="tab1" class="tab-pane">
            <h1>This is tab 1</h1>
         </div>
         <div id="tab2" class="tab-pane show active">
            <h1>This is tab 2</h1>
         </div>
         <div id="tab3" class="tab-pane">
            <h1>This is tab 3</h1>
         </div>
         <div id="tab4" class="tab-pane">
            <h1>This is tab 4</h1>
         </div>
         <div id="tab5" class="tab-pane">
            <h1>This is tab 5</h1>
         </div>
         <div id="tab6" class="tab-pane">
            <h1>This is tab 6</h1>
         </div>
         <div id="tab7" class="tab-pane">
            <h1>This is tab 7</h1>
         </div>
         <div id="tab8" class="tab-pane">
            <h1>This is tab 8</h1>
         </div>
         <div id="tab9" class="tab-pane">
            <h1>This is tab 9</h1>
         </div>
         <div id="tab10" class="tab-pane">
            <h1>This is tab 10</h1>
         </div>
         <div id="tab11" class="tab-pane">
            <h1>This is tab 11</h1>
         </div>
         <div id="tab12" class="tab-pane">
            <h1>This is tab 12</h1>
         </div>
         <div id="tab13" class="tab-pane">
            <h1>This is tab 13</h1>
         </div>
      </div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   </body>
</html>

javascript bootstrap-4

1 answer

1


You can use the method .animate() jQuery, but you need to use the full version of the library. In your code you are using the slim version, which does not have the .animate(). Just replace the library:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

For:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

See how it looks (explanations of how it works commented in the code):

$(".nav-tabs li").on("click", function(){ // pega os clicks nas tabs
   var ante = $(this).prev(); // pego a tab antes da que foi clicada
   var prox = $(this).next(); // pego a tab após a que foi clicada
   if(~prox.index()){ // verifica se existe
      var distLeft = Math.ceil(prox.offset().left); // distância da esquerda
      var proxWidth = Math.ceil(prox.width()); // pega a largura da tab
      if(distLeft+proxWidth >= window.innerWidth){ // verifica se está fora da tela (inteiramente ou parcialmente)
         $(this).parent().animate({ // faz o scroll animado para aparecer a tab
            // soma a distância, a largura e o que já foi rolado e subtrai pela largura da janela
            scrollLeft: distLeft+proxWidth+$(this).parent().scrollLeft() - window.innerWidth
         }, 200); // tempo de 200ms: 1/5 de segundo de animação
         return; // abandona a função
      }
   }
   
   if(~ante.index()){ // verifica se existe uma tab anterior
      var distLeft = Math.ceil(ante.offset().left); // distância da esquerda
      if(distLeft < 0){ // verifica se está fora da tela (inteiramente ou parcialmente)
         $(this).parent().animate({ // faz o scroll animado para aparecer a tab
            // soma o que já foi rolado com a distância da esquerda da janela
            scrollLeft: $(this).parent().scrollLeft()+distLeft
         }, 200); // tempo de 200ms: 1/5 de segundo de animação
      }
   }
});
<!DOCTYPE html>
<html lang="es">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="author" content="Juan Diego Torres Castillo">
      <title>Bootstrap Init Template</title>
      <!-- Boostrap CSS & Icons -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   </head>
   <body>
      <style>
         .nav-tabs {
         z-index: 1;
         position: relative;
         /* scroll */
         overflow-x: auto !important;
         overflow-y:hidden !important; 
         flex-wrap: nowrap !important;
         }
      </style>
      <h1>Template Boostrap</h1>
      <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item">
            <a href="#tab1" class="nav-link" data-toggle="tab">Tab 1</a>
         </li>
         <li class="nav-item">
            <a href="#tab2" class="nav-link  active" data-toggle="tab">Tab 2</a>
         </li>
         <li class="nav-item">
            <a href="#tab3" class="nav-link" data-toggle="tab">Tab 3</a>
         </li>
         <li class="nav-item">
            <a href="#tab4" class="nav-link" data-toggle="tab">Tab 4</a>
         </li>
         <li class="nav-item">
            <a href="#tab5" class="nav-link" data-toggle="tab">Tab 5</a>
         </li>
         <li class="nav-item">
            <a href="#tab6" class="nav-link" data-toggle="tab">Tab 6</a>
         </li>
         <li class="nav-item">
            <a href="#tab7" class="nav-link" data-toggle="tab">Tab 7</a>
         </li>
         <li class="nav-item">
            <a href="#tab8" class="nav-link" data-toggle="tab">Tab 8</a>
         </li>
         <li class="nav-item">
            <a href="#tab9" class="nav-link" data-toggle="tab">Tab 9</a>
         </li>
         <li class="nav-item">
            <a href="#tab10" class="nav-link" data-toggle="tab">Tab 10</a>
         </li>
         <li class="nav-item">
            <a href="#tab11" class="nav-link" data-toggle="tab">Tab 11</a>
         </li>
         <li class="nav-item">
            <a href="#tab12" class="nav-link" data-toggle="tab">Tab 12</a>
         </li>
         <li class="nav-item">
            <a href="#tab13" class="nav-link" data-toggle="tab">Tab 13</a>
         </li>
      </ul>
      <div class="tab-content">
         <div id="tab1" class="tab-pane">
            <h1>This is tab 1</h1>
         </div>
         <div id="tab2" class="tab-pane show active">
            <h1>This is tab 2</h1>
         </div>
         <div id="tab3" class="tab-pane">
            <h1>This is tab 3</h1>
         </div>
         <div id="tab4" class="tab-pane">
            <h1>This is tab 4</h1>
         </div>
         <div id="tab5" class="tab-pane">
            <h1>This is tab 5</h1>
         </div>
         <div id="tab6" class="tab-pane">
            <h1>This is tab 6</h1>
         </div>
         <div id="tab7" class="tab-pane">
            <h1>This is tab 7</h1>
         </div>
         <div id="tab8" class="tab-pane">
            <h1>This is tab 8</h1>
         </div>
         <div id="tab9" class="tab-pane">
            <h1>This is tab 9</h1>
         </div>
         <div id="tab10" class="tab-pane">
            <h1>This is tab 10</h1>
         </div>
         <div id="tab11" class="tab-pane">
            <h1>This is tab 11</h1>
         </div>
         <div id="tab12" class="tab-pane">
            <h1>This is tab 12</h1>
         </div>
         <div id="tab13" class="tab-pane">
            <h1>This is tab 13</h1>
         </div>
      </div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   </body>
</html>

  • Great! Thanks for the answer, like this same code, I can do an If Else to check when is the first tab and not the last?

  • Response changed with the back function as well.

  • Perfect, thank you very much!!

Browser other questions tagged javascript bootstrap-4

You are not signed in. Login or sign up in order to post.