CSS - Creating a scrollbar that controls a separate DIV

Question

I need to create a horizontal scrollbar that will control a the scrolling inside an horizontal DIV.

I can't use the regular OVERFLOW:AUTO CSS since the scrollbar is visually separate from the div. There are some (static) items between the scroll and the DIV.

I thought of using POSITION:FIXED for those items, and keep them inside the scrolling DIV. But it looks like FIXED position is only relative to the window and not the current container.

I know I can probably write some jQuery script to handle the scroll events and move the content in the DIV. Any way to achieve this with CSS or existing jQuery plugin?

Answer 1

Here is how I solved this problem:

Create a new div, and a div inside of it, like this (These are separate from your actual visible content):

<div id="scrollcontainer"><div id="containercontent">&nbsp;</div></div>

Now set the height of the 'scrollcontainer' div to be only as tall as a scrollbar (17px).

Then set the width of the 'scrollcontainer' div to match your the visible container.

Then set the width of the 'containercontent' div to match that of your actual content.

Then set your visible container to overflow: hidden

Then handle the onscroll event of the scrollcontainer, like this:

var newScroll = scrollcontainer.scrollLeft;
scrolledcontainer.scrollLeft = newScroll;