Scroll DIVs together

Question

I am wondering if anyone can tell me in theory how to lock 2 DIVs together when scrolling.

I need to create a large graph but can only show a small portion at a time. I need the labels to show in a stay locked to the data, but remain visible. I'm essentially trying to replicate the manner you can scroll through an excel worksheet.

So the labels on the side would scroll vertically with the data but stay fixed when scrolling horizontally. and vise versa with the labels on top.

This is all going to end up in a Rails app that will display a timeline of employees that worked for my fire dept over the last 100 years. the years will be along the top, and the ranks and positions will be along the side (50-60 lines) I'll only have the room to display 15 years and about 20 lines at a time and still be readable.

Any ideas would be appreciated.

Not sure if this is exactly what you mean, but could you enclose the two `
`s that you want to scroll inside a third `
`, and then just scroll the outer one? — Charles, Jan 21 '13 at 17:56
@CharlesTian That won't work with the horizontal scrolling of only the first div. — Shomz, Jan 21 '13 at 17:57

score 1 · Accepted Answer · answered Jan 21 '13 at 17:56

1

You can put listeners on both divs and then whenever one of them changes, make sure both of them get the same vertical offset.

answered Jan 21 '13 at 17:56

Shomz

37,421
4
57
85

hmmm that's an interesting approach, i'll play around with that. – bennett_an Jan 21 '13 at 18:08

score 0 · Answer 2 · answered Jan 21 '13 at 17:56

0

You could try position:fixed to lock the position of a div relative to the viewport while scrolling http://www.w3.org/Style/Examples/007/menus.en.html

answered Jan 21 '13 at 17:56

tofarr

7,682
5
22
30

1

That would be problematic. You can do that and it will stay fixed but it will stay fixed on both axis. OP needs it fixed on only one axis for each given bar (opposite on each) – Joseph Marikle Jan 21 '13 at 17:58
http://stackoverflow.com/questions/4176432/fixed-position-in-only-one-direction-with-css – tofarr Jan 21 '13 at 18:02
That's nice! Would be nice to have it in the answer, though. My assumption was that the intended answer only included this css property with no mention of javascript to alter such behavior. – Joseph Marikle Jan 21 '13 at 18:04
I'll use whatever i need to. I tagged Javascript as well, but i'm not very well versed in it yet. – bennett_an Jan 21 '13 at 18:10

score 0 · Answer 3 · answered Feb 06 '13 at 03:50

$('#center').ready(function(){
    var left
    $('#center').on("scroll", function(){  //activate when #center scrolls
        left = $('#center').scrollLeft();  //save #center position to var left
        $('#top').scrollLeft(left);        //set #top to var left
    });
});

Scroll DIVs together

3 Answers3