Question

I regularly use the jQuery jScrollPane plugin to add custom scroll bars to page sections. I have run into a situation where I want to use the plugin to display a vertical scroll bar for the main content area of a page. Since the content can have varying height I cannot specify a fixed height for this area and therefore the plugin does not display the vertical scroll bar even when it should.

I have uploaded my full HTML, CSS and JavaScript code at jsfiddle.net for demonstration of the problem. The area with lots of text should display a jScrollPane vertical bar but it doesn’t. I know that if I add a height to the .scroll CSS class, the scroll bar will start appearing. However, different users will have different screen resolutions and therefore the height of the content area will vary, preventing me from specifying a height for the content area.

Answer 1

Without a specified height, the vertical overflow will not work. You can always set the height of the scrollable area dynamically:

$(document).ready(setScrollable());
$(window).resize(setScrollable());

function setScrollable()
{
   $('.scroll').css('height', $(window).height() - $('#header').height());    
   $('.scroll').jScrollPane();
}