Firefox 3.6 Javascript custom scrollbar performance

Question

Hi,

I have written a custom scrollbar class in javascript for use in a "freezepane" structure. Performance in most browsers (including IE6!!!) is good. But in firefox 3.6 (beta 4 is fine) it is very jerky. When the scrollbar is moved, the onmousemove event calculates a position then sends the new position to a callback that is setting the style.left(or top) of 2 elements that are larger than their parent DIV containers that hide the overflowed content. The main content of the freezepane is an absolutely positioned DIV wrapping a large and complex table structure (for displaying market prices) - I have narrowed it down to the repeated setting of the style.left (or top) as being the performance bottleneck in FF.. is there any trick to improving this? I really don't understand how IE6 is outperforming FF on this one!

Thanks in advance Dazz

Answer 1

I'd consider to not use JavaScript to do the scrolling, and use a normal hidden scroll bar instead.

See: http://stackoverflow.com/questions/2254585/custom-scroll-bar-visualization-with-html-css-javascript

In short: use overflow-y: scroll; to add a scroll bar to a div, and hide the scroll bar behind another div with overflow: hidden;.

No JavaScript, giving you native performance and native behaviour.

Answer 2

Using native scroll bars does work, wasn't aware that anything with scrolled overflow generates an onscroll event that you can tie into to set the scrollLeft of the other containers to the same value achieving the freeze pane effect.