JavaScript - - By Sam Deering

jquery add scrollbar to div

Useful jquery code snippet when adding a scrollbar to div if the content exceeds the area of the container element. Sorry no demo, but just paste into Firebug.

//D = document
//W = window
//$ = jQuery

var contentArea = $(this),
    wintop = contentArea.scrollTop(),
    docheight = $(D).height(),
    winheight = $(W).height(),
    divheight = $('#content').height(),
    scrollheight = $('#content')[0].scrollHeight,
    scrolltrigger = 0.9;

console.log('wintop ' + wintop);
console.log('docheight ' + docheight);
console.log('winheight ' + winheight);
console.log('divheight ' + divheight);
console.log('scrollheight ' + scrollheight);

console.log((wintop + divheight)/scrollheight);

if  (((wintop + divheight)/scrollheight) > scrolltrigger) {
    // display scroll bar
}

Further reading:
http://manos.malihu.gr/jquery-custom-content-scroller
http://jscrollpane.kelvinluck.com/arrows.html

Sponsors
Login or Create Account to Comment
Login Create Account