Fix: SharePoint Modal Dialog Loses Scroll Position (Scrolls to Top) when Resized

While working with SharePoint 2013’s modal dialog there were a few cases where the dialog lost its scroll bar position and jumped back to the top whenever a resize ocurred. For those who may have stumbled here looking for the resize code it begins as follows:

var dlg = SP.UI.ModalDialog.get_childDialog();
dlg.autoSize();

If the user has scrolled down to activate a part of the form that may expand its always handy to try to get the dialog to expand as much as possible to fit on the users screen. as mentioned it will cause the scroll bar to to go to the very top, this can be frustrating from a UX perspective. In my solution I used jQuery to help out.

In my particular case the javascript code I am working with sits outside of the iframe that SP uses for its modal dialog causing a bit of hassle to figure out how to do this correctly. The dialog has a property to get the iframe element, following which contents() must be called to interact with the actual content therein. Last thing to note is that to work with scroll top you must know what element is being scrolled, in most cases it will be #s4-workspace. With that said the code below is how I got around this issue:

var dlg = SP.UI.ModalDialog.get_childDialog();
var origScroll = $('#s4-workspace', $(dlg.get_frameElement()).contents()).scrollTop();
dlg.autoSize();
$('#s4-workspace', $(dlg.get_frameElement()).contents()).scrollTop(origScroll);

The origScroll calls a jQuery selector that looks within the dialogs frame element’s contents for element id s4-workspace and grabs the current position of the scrollbar. Following the autosize it just calls the same element and sets the scrollTop to what it was before.