mCustomScrollbar

HTML

<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css">
<div class="mcs-horizontal-example">
    <div class="item"> </div>
     <div class="item"> </div>
      <div class="item"> </div>
       <div class="item"> </div>
    <!-- etc. -->
</div>
<div id="container1">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>6</p>
  <p>6</p>
</div>

CSS

#container1 {
    height:200px;
    width:100px;
    padding:5px;
    border:1px solid black;
}

.mCSB_draggerRail{width:20px;}
 
.mcs-horizontal-example{
  width: 100%;
  overflow-x: auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
}

.mcs-horizontal-example .mCSB_container{
  display: -webkit-flex; display: flex;
}

.mcs-horizontal-example .item{
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

JavaScript

$('#container1').mCustomScrollbar({ 
        theme:"dark-3"        
});
$(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3",
      advanced:{
        autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
      }
    });
$(document).on('click', '.participants li', function(e){
  
});