JavaScript
Article
By Sam Deering

jquery add scrollbar to div

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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

--ADVERTISEMENT--

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?