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 edges of the current section).
When I load sections below the currently viewed section, this does not affect the current scrolling (i.e. scrollTop) position, but when I insert new sections above the current viewed section it of course pushes the viewed content down.
We need to maintain the scrollTop position relative to the current section. We also need to avoid the display jumping/glitching while the adjustments are made.
I would like some suggestions from anyone that has actually had to solve this problem. It is important that the screen not glitch, so syncing scrollTop to a slow DOM update should be avoided.
Suggestions or comments on the proposed solutions? Is there a scroll replacement that would do this already?
If you can't solve it, but think it is worth solving, consider upvoting so I can put a large bounty on it! :)
The Element. scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content.
An element's scrollTop is a form of distance measurement regarding an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0." Since the content of inner doesn't generate a scrollbar, scrollTop is 0 .
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:
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!
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. :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With