Scroll - Enscroll() Plugin - Multiple Instanes - BIZAMAJIG USAGE

This appears to be a bug with the enscroll plugin. Please watch the following issue if you're still waiting for a resolution: https://github.com/jstoudt/enscroll/issues/21

by bizamajig

HTML

<script src="http://enscrollplugin.com/releases/enscroll-0.4.3.min.js"></script>
<table id="brand-groups">
   <tr>
	  <td id="open-all" class="brand-groups-tab" valign="middle" width="170">
	  ALL BRANDS</td>
	  <td class="brand-groups-spacer"></td>
	  <td id="open-fashion" class="brand-groups-tab" valign="middle"  width="170">FASHION BRANDS</td>
	  <td class="brand-groups-spacer"></td>
	  <td id="open-beauty" class="brand-groups-tab" valign="middle">POPULAR BEAUTY</td>
   </tr>
 
</table>

  <div id="all" class="brandgroupoption init-hidden">
    
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a
   justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at
   egestas non, vulputate ut quam. Morbi a erat tristique tellus
   varius venenatis.</div>
<div id="fashion" class="brandgroupoption init-hidden">
    
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a
   justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at
   egestas non, vulputate ut quam. Morbi a erat tristique tellus
   varius venenatis. 
</div>
<div id="beauty" class="brandgroupoption init-hidden">
    
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a
   justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at
   egestas non, vulputate ut quam. Morbi a erat tristique tellus
   varius venenatis.
</div>

CSS

#all{ padding:0px 10px 10px 10px;
width: 150px;
position:absolute;
margin:0px 10px 20px 0px; 
height:120px; 
overflow:auto;
color:#000000;
left:10px;
}


#fashion{ padding:0px 10px 10px 10px;
width: 150px;
position:absolute;
left:190px;
margin:0px 10px 20px 0px; 
height:120px; 
overflow:auto;
color:#000000;
}


#beauty{ padding:0px 10px 10px 10px;
width:150px;
position:absolute;
margin:0px 10px 20px 0px; 
height:120px; 
overflow:auto;
left:350px;
color:#000000;
}
.track3 {
    width: 10px;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 10px;
    -webkit-transition: background 250ms linear;
    transition: background 250ms linear;
}
.track3:hover, .track3.dragging {
    background: #d9d9d9;
    /* Browsers without rgba support */
    background: rgba(0, 0, 0, 0.15);
}
.handle3 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    -webkit-transition: width 250ms;
    transition: width 250ms;
}
.track3:hover .handle3, .track3.dragging .handle3 {
    width: 10px;
}

JavaScript

$('.init-hidden').hide();
  

    $('#all').enscroll({
    showOnHover: true,
    verticalTrackClass: 'track3',
    verticalHandleClass: 'handle3'
   });
   
    $('#fashion').enscroll({
    showOnHover: true,
    verticalTrackClass: 'track3',
    verticalHandleClass: 'handle3'
   });
   
     $('#beauty').enscroll({
    showOnHover: true,
    verticalTrackClass: 'track3',
    verticalHandleClass: 'handle3'
   });
   
   
   $('#open-fashion').click(function(){
  	 $('#fashion').slideToggle();
   });
   
    $('#open-all').click(function(){
      $('#all').slideToggle();
   });
   
    $('#open-beauty').click(function(){
      $('#beauty').slideToggle();
   });