﻿function makeScrollable(swrapper, scrollable){

 var swrapper = $(swrapper), scrollable = $(scrollable);


    swrapper.css({overflow: 'hidden'});      
    
    scrollable.show(function(){
     enable(); 
    });     
 
 
 function enable(){
 
  var inactiveMargin = 99;     
 
  var swrapperWidth = swrapper.width();
  var swrapperHeight = swrapper.height();
 
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
 

  var lastTarget;
  
  swrapper.mousemove(function(e){
 
   lastTarget = e.target;
 
   var swrapperOffset = swrapper.offset();
 
   var top = (e.pageY -  swrapperOffset.top) * (scrollableHeight - swrapperHeight) / swrapperHeight - inactiveMargin;
   if (top < 0){
    top = 0;
   }   
   swrapper.scrollTop(top);
  });
  
  
 }
}
 
$(function(){ 
 makeScrollable("div.scrollbox-01", ".scrollbox-01 ul");
 makeScrollable("div.scrollbox-02", ".scrollbox-02 ul");
 makeScrollable("div.scrollbox-03", ".scrollbox-03 ul");
});

 

