Oct 192011
 

There is an IE 6 / IE 7 (only) bug that causes the content that should be scrolling to spill out over the rest of the page. (The scroll bar appears, but the part of the scrolling content that should be “hidden” is spilling out onto the rest of the page where it shouldn’t be visible. Other than the overflow of the scrolled area being visible, the scroll works correctly.)

For example:

<div id=”xyz”>
 … lots of content here …
</div>

In your scripts (probably inside a $(document).ready() call):

$(“#xyz”).jScrollPane();

This is because overflow: hidden has a known issue with IE6/IE7 if the block (div) that is supposed to be overflow: hidden (as is the case with the scrolling div) but isn’t position: relative. The fix for this is to give position: relative to the div you are trying to make scroll

<div id=”xyz” style=”position: relative”>
 … lots of content here …
</div>

See these links related to the overflow: hidden issue in IE6/IE7:

stackoverflow.com

mt-olympus.com