Maintain scrollTop while inserting new sections above the current viewed elements (without glitching)

Question

Here\'s one for the real JQuery UI geniuses: We have a extremely long form with sections loaded on demand (e.g. when an index/navigation is clicked, or as we scroll near the

Answer 1

Update 4 Sep 13

Option 4 turns out to be too slow in practice once you have to take into account things like auto-scrolling to keep focused controls onscreen.

It turns out Option 1 will work so long as you do the following:

• Add top and bottom fillers (e.g. empty divs) so that the browser accepts the larger pane (margins are not taken into account by the browser's auto-scrolling) and you can't scroll below scrollTop 0 (no negative scrollTop in browsers).
• When inserting content, first adjust the position of only items that are affected (i.e. above or below the target position in the view.
• Once the adjustments are made change the position of all items (by stacking them from 0 again) and change the scrollTop to match. If there are only a few dozen items or less this will not glitch, so I strongly recommend having larger containers at the top level (like sections) that need to be scrolled, while their content remains relative.

Option 1 has the advantage that it does not fight the browser's native auto-scrolling when you change focus (e.g. tab) between items. This has turned out to be the best practical solution and has allowed us to produce a "very long" form consisting of dozens of dynamically loaded sections (loaded via navigation links, or via their proximity to viewport) and it works amazing well. Conga indeed!

Early testing:

Initially we went with option 4: We have created our own scrolling and we layout the items, absolutely positioned, within a relative parent.

When items change size the positions of item above or below are recalculated (depending on where they were relative to the viewport). This content change can be triggered by an Ajax load or manual change of size.

To cater for manual scrolling we are using MouseWheel.js and we are capping the scroll so that the extents of the first and last items are restricted by the top and bottom 25% of the viewport.

As the JQuery add-in "lines up" content, one after the other, we have decided to call it Conga. :)