Comment styliser une barre de défilement pour une liste de défilement horizontal?

Question

tentative de style une barre de défilement pour une liste de défilement horizontale pour créer le style trouvé ici: http://manos.malihu.gr/code-example/horizontal-custom-scrollbar-tutorial/ (voudrais également changer la couleur de la barre de défilement)

La fonction jQuery mCustomScrollBar doesnt semblent fonctionner. Voici un lien vers mon code: https://codepen.io/KevinM818/pen/WEjBVW

<section class="productSlider"> 
     <div class="prodList"> 
      <ul class="list-inline"> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
      </ul> 
     </div> 
    </section> 

.productSlider { 
    padding: 100px 0; 
    h1 { 
     text-align: center; 
     font-weight: bold; 
     padding-bottom: 50px; 
    } 
    .prodList { 
     margin: 0 auto; 
     overflow-x: scroll; 
     overflow-y: hidden; 
     width: 82%; 
     .prodItem { 
      padding: 0 50px; 
     } 
     .list-inline { 
      white-space: nowrap; 
     } 
    } 
} 

$(document).ready(function(){ 
    $(window).on("load",function(){ 
    $(".prodList").mCustomScrollbar({ 
     axis:"x", 
     theme:"dark-3" 
    }); 
    }); 
}); 

Answer 1

Vérifiez si vous avez ajouté le mcustomscrollbar dans votre

<link rel="stylesheet" type="text/css" href="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css"> 
<script src="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script> 

Modifier votre jQuery comme ci-dessous.

$(document).ready(function(){ 
    $(".prodList").mCustomScrollbar({ 
     axis:"x", 
     theme:"dark-3" 
    }); 
}); 

Et dans le changement CSS .prodList valeur overflow-x à l'auto