I am working on a real-time chat area in my site where I have a listbox that has chat messages show up as they come in. My issue is that I want all new message to show up at the bottom of the page, and to have the scroll position kept at the bottom of the page.
I found javascript to set the scroll-position to the bottom of the listbox on pageload, but some of the messages may contain large images that, on slow 3G/4G phones, take a bit to load in. When they finish loading in, they increase the length of the listbox's content, this making the scrollbar not be pinned to the bottom of the list.
I tried to alleviate this issue by using jQuery to scroll to the bottom of the listbox after all images are loaded, but for many users this results in the listbox's scroll position jerking around.
Is there an easier way to just *reverse* the scrolling direction of the listbox, or some alternative I am missing?