Using jQuery Plugin to implement scrollbar in iPad,

Since normal scrollbar implemented for browser does not work in iPad, we can implement it using JScollPane which is a jQuery plugin.

After downloading the above files store them in respective directories and add HTML code to implement the scrollbar. Here is a sample HTML code snippet

    
        jScrollPane example skins (operating system style scrollbars)
        
        
        
        
        
        
        
        
        .scroll-pane {
            width: 200px;height: 200px;
            overflow: auto;
            background: #ccc;float: left;
        }
         .jScrollPaneTrack {
         background: url(images/windows_track.gif) repeat-y;
        }
         .jScrollPaneDrag {
         background: url(images/windows_drag_middle.gif) no-repeat 0 50%;
        }
         .jScrollPaneDragTop {
            background: url(images/windows_drag_top.gif) no-repeat;
            height: 4px;
        }
         .jScrollPaneDragBottom {
            background: url(images/windows_drag_bottom.gif) no-repeat;
            height: 4px;
        }
         a.jScrollArrowUp {
            height: 17px;
            background: url(images/windows_arrow_up.gif) no-repeat 0 0;
        }
         a.jScrollArrowUp:hover {
            background-position: 0 -20px;
        }
         a.jScrollArrowDown {
            height: 17px;
            background: url(images/windows_arrow_down.gif) no-repeat 0 0;
        }
         a.jScrollArrowDown:hover {
            background-position: 0 -20px;
        }
         a.jScrollActiveArrowButton, .winXP a.jScrollActiveArrowButton:hover {
            background-position: 0 -40px;
        }
        
        
        
            $(function()
            {
                // this initialises the demo scollpanes on the page.
                $('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 17});
            });
        
        
    
    
        
            your contents 

this is a demo 

this is a demo 

to implement   the scrollbar



which will also work in ipad.
        
    

The scrollbar can be used using a single finger as well as using two-fiingers but the latter has a disadvantage, as in, the whole page may scroll up or down instead of a content of any section.

Here is an easy way to scroll any section content with one finger only. The only thing you need to do is copy this code in the (isScrollable) {} block of jScrollPane.js file.

// Ipad Iphone
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))){
    var isTouchScreen = 1;
    }else{
    var isTouchScreen = 0;
}
$container.bind('touchstart', function(e){
    var cpos = dragPosition;                    
    if(isTouchScreen){
    e = e.originalEvent.touches[0];
}
var sY = e.pageY;
var sX = e.pageX;
$container.bind('touchmove',function(ev){
if(isTouchScreen){
    ev.preventDefault();
    ev = ev.originalEvent.touches[0];
}                        
var top = cpos-(ev.pageY-sY);
positionDrag(top);
});
$container.bind('touchend',function(ev){
    $container.unbind('touchmove touchend');
});

The above code will disable the default page scrolling feature of ipad and apply it to your section content which you want to scroll.