display parent horizontal scroll bar and child vertical scroll bar - html

Question

I have a custom timeline view like this: http://jsfiddle.net/B4xRb/1/
The inner vertical scroll affects the rows beneath the header only.
The parent horizontal scroll affects the entire timeline.
<div class="parentDiv">
<div class="monthHeader"></div>
<div class="lanes"></div>
</div>
However, how could I structure this so that the vertical scroll bar can be seen WITHOUT
adjusting the row data as it can be really wide.
initially scrolling to the right, I want it so as you load the page, both scroll bars are visible

Answer 1

Here's the solution I came up with, using jQuery: http://jsfiddle.net/eB8WQ/6/
First off, to hide the second outside vertical scroll bar, add this code
html, body {
overflow-y: hidden;
}
for .lanes, you want to hide the horizontal scroll bar and set the initial width to 100%.
width: 100%;
overflow-x: hidden;
Next, the javascript you want to use sets the width of .lanes to 100% while scrolling (to avoid the messy flickering problem), and when you're done scrolling, it calculates the position of the horizontal scrollbar and adds that value to the width of your body element. Use the $.data function to store the value.
More information on $.data: http://api.jquery.com/jQuery.data/
$('.parentDiv').scroll(function() {
$('.lanes').css("width", $('.monthHeader').width());
});
$('.parentDiv').scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('.lanes').css("width", $('.parentDiv').scrollLeft() + $('body').width() + "px");
}, 100));
});
Some code taken from this previous answer.