I am making a rather complex website that has as a key factor texts in different panels that I want to make scroll together (synchronously). That is: when the user scrolls down a few lines in one panel, the other panel presenting a parallel text should scroll the same few lines. Further, at the top of each panel I have an information line, saying just what text the panel contains. I want this to stay in view and not scroll out of sight, while the text below in the panel scrolls.
I can do one thing, but not the other. I have made a jSFiddle that shows my attempts to make this work at JS Fiddle. The whole file is available at www.inklesseditions.com/TCR/testsyncscroll.html. Thus:
- if you scroll in all four panels: you will see that the panels at the bottom scroll correctly. That is: the text “Stays at top when text scrolls” stays there while the text below scrolls. The panels at the top do not scroll correctly: the text “Scrolls with text” scrolls out of sight as the text below scrolls.
- Click the “Synchronize Scrolling” textbook so now it is checked. Scroll the text in either one of the top two panels. It works well: the text in both panels moves together when you scroll either one. BUT the text in the bottom two panels does NOT scroll correctly. Rather, it scrolls always to the very bottom of the text in each panel, even if you want to scroll just one line in either direction. Further, the line “Stays at top when text scrolls” scrolls out of sight.
Help! I’ve been stuck for ages on this. It appears that in the bottom panel scrolling in one window causes some kind of race condition, which does not end until both panels have scrolled to the very bottom.
I’m aware that scrolling is really tricky, with different combinations of “overflow auto/scroll/hidden” etc and different height settings causing unpredictable behaviour. I am sure that some combination exists that will do what I want. I just don’t know what it is.
I’ve included in my code elements outside this particular problem. I did that because I use flexbox throughout and it’s possible that there is some interaction with flexbox which is causing this misbehaviour.