AEM (CQ5) - Touch UI scroll fix with dynamically setting iframe height

In Touch ui in aem 6.2, Sometime page content is cut and user is unable to scroll. This happens if there is something being loaded by ajax or sometimes if there is long page even without ajax. It can be fixed by setting the iframe height again, once the inner page is loaded.

Code:

getDocHeight: function (doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body,
html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
},
setIframeHeight: function (id) {
var ifrm = parent.document.getElementById(id);
if (ifrm) {
var doc = ifrm.contentDocument ? ifrm.contentDocument :
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears - changed 4 px addition to 10 px due to author instance
ifrm.style.height = getDocHeight(doc) + 10 + "px";
ifrm.style.visibility = 'visible';
}
}

You can call function as setIframeHeight("ContentFrame") on page load. It will reset the iframe height and content will become scrollable.