My app has pages where the list of items in the content pane would be longer than the viewport in the browser will allow. Since the latest item is at the bottom, I would like to scroll down to the bottom.
The problem is that there is no "scrollBottom" function in jQuery, only scrollTop, and the silentScroll function seems to be incredibly unreliable across different browsers. This is exacerbated by the fact that there is no page event that reliably fires after the page is completely done loading.
I'm trying to do math on the size of the page elements, and then call silentScroll to move to the bottom, and trying to trigger that on the pageshow event (supposedly the last to fire, right?). The iOS browser will give different values for heights for the exact same content on different loads, so despite being 100% consistent in content, it's not giving me back the same values time to time on the same pageshow event. I've read that pageshow isn't really after everything is loaded, though, so that could be the problem. It might also be my CSS selectors, but I think the below should accurately be targeting the content div.
Anybody have done this before and could point me in the right direction?
Thanks,
Mike
If it helps, the formula I'm using to calculate is below.
- var openViewingHeight = ($("body").height() - $('div[data-role="header"]').height() - $('div[data-role="footer"]').height());
if (openViewingHeight < $('div[data-role="content"]').height()) { // height of space to view is less than the stuff to be viewed
$.mobile.silentScroll($('div[data-role="content"]').height() - openViewingHeight);
}