Submit your widget

Beautiful custom content scroller with jquery

Created 10 years ago   Views 36519   downloads 6359    Author malihu
Beautiful custom content scroller with jquery
View DemoDownload 11.3 KB
200
Share |

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar.

The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.

The code

The css

body {margin:0; padding:0; background:#333;}
#outer_container{margin:60px; width:260px; padding:0 10px; border-top:1px solid #666; border-bottom:1px solid #666;}
#customScrollBox{position:relative; height:600px; overflow:hidden;}
#customScrollBox .container{position:relative; width:240px; top:0; float:left;}
#customScrollBox .content{clear:both;}
#customScrollBox .content p{padding:10px 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#customScrollBox img{border:5px solid #fff;}
#dragger_container{position:relative; width:0px; height:580px; float:left; margin:10px 0 0 10px; border-left:1px solid #000; border-right:1px solid #555;}
#dragger{position:absolute; width:9px; height:40px; background:#999; margin-left:-5px; text-align:center; line-height:40px; color:#666; overflow:hidden; border-left:1px solid #ccc; border-right:1px solid #555;}

The jQuery scripts and plugins inside head tag (jquery and jquery UI are loaded straight from Google)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>

The full javascript code is inserted in the end of the document, just before the closing body tag.

<script>
$(window).load(function() {
 $customScrollBox=$("#customScrollBox");
 $customScrollBox_container=$("#customScrollBox .container");
 $customScrollBox_content=$("#customScrollBox .content");
 $dragger_container=$("#dragger_container");
 $dragger=$("#dragger");

 visibleHeight=$customScrollBox.height();
 if($customScrollBox_container.height()>visibleHeight){ //enable scrollbar if content is long
  totalContent=$customScrollBox_content.height();
  minDraggerHeight=$dragger.height();
  draggerContainerHeight=$dragger_container.height();
  adjDraggerHeight=totalContent-((totalContent-visibleHeight)*1.3); //adjust dragger height analogous to content
  if(adjDraggerHeight>minDraggerHeight){ //minimum dragger height
   $dragger.css("height",adjDraggerHeight+"px").css("line-height",adjDraggerHeight+"px");
  } else {
   $dragger.css("height",minDraggerHeight+"px").css("line-height",minDraggerHeight+"px");
  }
  if(adjDraggerHeight<draggerContainerHeight){ //maximum dragger height
   $dragger.css("height",adjDraggerHeight+"px").css("line-height",adjDraggerHeight+"px");
  } else {
   $dragger.css("height",draggerContainerHeight-10+"px").css("line-height",draggerContainerHeight-10+"px");
  }
  animSpeed=400; //animation speed
  easeType="easeOutCirc"; //easing type
  bottomSpace=1.05; //bottom scrolling space
  targY=0;
  draggerHeight=$dragger.height();
  $dragger.draggable({ 
   axis: "y", 
   containment: "parent", 
   drag: function(event, ui) {
    Scroll();
   }, 
   stop: function(event, ui) {
    DraggerOut();
   }
  });

  //scrollbar click
  $dragger_container.click(function(e) {
   $this=$(this);
   $this.css("background-color","#555");
   var mouseCoord=(e.pageY - $this.offset().top);
   var targetPos=mouseCoord+$dragger.height();
   if(targetPos<$dragger_container.height()){
    $dragger.css("top",mouseCoord);
    Scroll();
   } else {
    $dragger.css("top",$dragger_container.height()-$dragger.height());
    Scroll();
   }
  });

  //mousewheel
  $(function($) {
   $customScrollBox.bind("mousewheel", function(event, delta) {
    vel = Math.abs(delta*10);
    $dragger.css("top", $dragger.position().top-(delta*vel));
    Scroll();
    if($dragger.position().top<0){
     $dragger.css("top", 0);
     $customScrollBox_container.stop();
     Scroll();
    }
    if($dragger.position().top>$dragger_container.height()-$dragger.height()){
     $dragger.css("top", $dragger_container.height()-$dragger.height());
     $customScrollBox_container.stop();
     Scroll();
    }
    return false;
   });
  });

  //scroll
  function Scroll(){
   var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
   var draggerY=$dragger.position().top;
   targY=-draggerY*scrollAmount;
   var thePos=$customScrollBox_container.position().top-targY;
   $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
   //$customScrollBox_container.css("top",$customScrollBox_container.position().top-thePos+"px"); //no easing
  }

  $dragger.mouseup(function(){
   DraggerOut();
  }).mousedown(function(){
   DraggerOver();
  });

  function DraggerOver(){
   $dragger.css("background-color", "#ccc").css("color", "#666").css("border-left-color", "#fff").css("border-right-color", "#555");
  }

  function DraggerOut(){
   $dragger.css("background-color", "#999").css("color", "#666").css("border-left-color", "#ccc").css("border-right-color", "#555");
  }
 } else { //disable scrollbar if content is short
  $dragger.css("display","none");
  $dragger_container.css("display","none");
 }
});
</script>

Feel free to use it wherever-however you like. Enjoy :)