FB Style Scrollbar

After trying to modify my image gallery by changing overflow style, I was inspired by facebook-style scroll bar. Then, decided to work on this scroll bar based on jQuery-UI Slider. So, following ui based on 3 parts:

• HTML for ui construction.
• CSS for fb-like style.
• And the last part is javascript for an vertical scroll pane.

Can't wait? watch this demo.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

There are two js library requirements:

• jquery-ui-1.8.16 (ui.slider and effect.fade are required)
• jquery.mousewheel

Let's start with html part:

<div class="scroll-pane">
  <div class="scroll-bar-wrap"></div> <!-- for scroll element -->
 <div class="scroll-content">
  <div class="scroll-content-item">1</div>
  <div class="scroll-content-item">2</div>
  <div class="scroll-content-item">3</div>
  <div class="scroll-content-item">4</div>
  <div class="scroll-content-item">5</div>
  <div class="scroll-content-item">6</div>
  <div class="scroll-content-item">7</div>
                <!-- add up element to trick the overflow -->
  <div class="scroll-content-item">38</div>
  <div class="scroll-content-item">39</div>
  <div class="scroll-content-item">40</div>
                <div style="clear:left;"/>
 </div>
</div>

Working on CSS:

.scroll-pane { overflow: hidden/*auto*/; width: 800px; height: 300px; border:1px solid gray; }
.scroll-content { top:0; left:0; width: 100%; padding-right: 12px;}
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; float:left; border:1px solid gray; }
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */

.scroll-bar-wrap { float: right; height: 100%; width: 12px;}
.scroll-bar { position:relative; height:100%; margin-right:2px; }
.scroll-bar .ui-slider-handle{ width:8px; height:10px; background-color:darkgray; display:block; position:absolute; border:3; -moz-border-radius: 3px; border-radius: 3px;}
.scroll-bar a {cursor: default;}
.scroll-content{
  position: relative ;
  top:0; left:0;
  margin-left:15px; margin-right: 12px;
}

And the last, JavaScipt:

$(function() {
    //scrollpane parts
    var scrollPane = $('.scroll-pane'), scrollContent = $('.scroll-content');
  
    //change overflow to hidden now that slider handles the scrolling
    scrollPane.css( "overflow", "hidden" );

    // init scrollbar whenever possible
    if (scrollContent.height() > scrollPane.height()) {
      // initial part
      var remainContentHeight = scrollContent.height() - scrollPane.height();
      var proportion = remainContentHeight / scrollContent.height();
      var handleSize = Math.round(scrollPane.height() - (proportion * scrollPane.height()));
      $('.scroll-bar-wrap').append($('<div class="scroll-bar"/>'));
      
      //build slider
      var scrollbar = $( ".scroll-bar" ).slider({
        orientation: "vertical",
        min: 0,
        max: 100,
        value: 100,
        slide: function( event, ui ) {
          scrollContent.css( "top", Math.round( ( ui.value - 100) * (scrollContent.height() - scrollPane.height()) /100 ));
        },
        change: function( event, ui ) {
          scrollContent.css( "top", Math.round( ( ui.value - 100) * (scrollContent.height() - scrollPane.height()) /100 ));
        }

      });
      // adjust UI things
      $('.scroll-bar .ui-slider-handle').css({'height':handleSize, 'margin-bottom':-0.5*handleSize});
      $('.scroll-bar').css({'margin-top': 2 + handleSize/2, 'height': $('.scroll-bar').height() - handleSize - 3}).hide();
      
    } // EIF
    
    //additional code for mousewheel
    $('.scroll-pane, .scroll-bar-wrap, .scroll-bar a').mousewheel(function(event, delta){
      var speed = 5;
      var sliderVal = $('.scroll-bar').slider('value');//read current value of the slider
      sliderVal += (delta*speed);//increment the current value
      $('.scroll-bar').slider('value', sliderVal);//and set the new value of the slider
      event.preventDefault();//stop any default behaviour
    });
    
    // style scrollbar up to be a fb-like
    $('.scroll-pane').hover(
      // hover-in
      function(){$('.scroll-bar').stop().fadeTo(300, 1)}, 
      // hover-out
      function(){$('.scroll-bar').stop().fadeTo(700, 0);}
     );    
});

This javascript is already tested in 3 browser: ff, chrome, and IE 9.X
Thank you for very useful guidelines for coding from http://jqueryui.com/demos/slider/ and http://www.simonbattersby.com/blog/vertical-scrollbar-using-jquery-ui-slider/