HTML&CSS3*JavaScript advanced scrolling

Question

I need to create a tool with HTML, CSS3 and JavaScript. It will contain some horizontal and vertical scrollbars to use in order to see all the content properly, keeping fixed sizes of some elements. This is the layout that tries to explain what I want enter image description here

So, I have a #main DIV containing a #left and #right DIV. Left DIV contains two DIVs and right DIV contains another 2 DIVs. Now, I want to create a vertical scroll-bar (vscroll1) to scroll up and down through both #content and #menu DIVs (at the same time, like they where the same DIV). On the other hand I want a horizontal scroll-bar (hscroll2) to scroll to the left and right through #content and #left_top_div, at the same time, like it would be the same content.

I think I may have 2 ways: some CSS+HTML trick or by using JavaScript. Right now, If attach scrollbars to #leftdiv (overflow:auto), it will scroll the #left_top_div and #content (DIVs contained by it) as I want it, but vertically it will scroll only #content, not the #menu DIV. So, that's a problem. I could use JavaScript with the .onscroll() event to change #menu topMargin, but there's a small delay which doesn't look good. What do you advise me to do? I just need some tips or techniques (well, some example code is also appreciated). Thanks to everybody for, at least, reading all my question.

Looks like a job for framesets — ! *is murdered*

Waleed Khan
– Waleed Khan

2012-09-04 17:14:58 +00:00
Commented Sep 4, 2012 at 17:14 — Waleed Khan
– Waleed Khan, Commented Sep 4, 2012 at 17:14

DA. · Accepted Answer · 2012-09-04 17:16:15Z

1

Set all the div's CSS overflows to 'hidden' by default. Then...

Wrap #menu and #content in a fixed-height div with an overflow-y: scroll;

Then make #menu and #content fixed-width divs with an overflow-x: scroll

answered Sep 4, 2012 at 17:16

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ali Over a year ago

Your answer enlightened me a little bit more. Yet, if I do what you say then #left_top_div won't scroll along with #content, horizontally.

DA. Over a year ago

@ali that is true. I missed that requirement. That gets a bit trickier. You may have to resort to javascript at that point and watch for scrolling of one div and then sync the others.

ali Over a year ago

Thanks. I tried that but a small delay in the position change make it look like a drawing problem. I need some JavaScript trick to make it faster. I use marginLeft to move the #left_top_div at the same position as #content but the scrolling of #content is faster.

Collectives™ on Stack Overflow

HTML&CSS3*JavaScript advanced scrolling

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related