September 15th, 2013, 02:43 PM
Infinite scroll Ajax. Which way is better?
I have an infinite scroll set up for a message board. The latest messages are at the bottom and the user has to scroll up for older messages. A function is executed when the scrollbar is 300px from the top and 5 messages are delivered from the server. This is done using the onscroll event. However a problem I find is the event is fired too many times when a person is scrolling (this is to be expected). Thus too many messages are delivered from the DB. Another problem is, the event is not called if by chance the user has quickly scrolled right to the top while there are many messages still in the DB. This means the user needs to scroll down and back up to trigger the function.
I thought a good alternative to the above would be to poll the browser every half second to see if the scrollbar is in the right position instead of relying on the onscroll event. However a quick search has not shown polling the method in the tutorials that I have come across. Is there anything wrong with the polling method?
Last edited by romario; September 15th, 2013 at 02:45 PM.
September 15th, 2013, 04:05 PM
I decided to trigger the function when the scrollbar is 20% from the top of the scrollHeight rather than being a certain about of scrollTop. This made things better.
However I have noticed that when new items are added to the top of the element which has the scrollbar, the contents which is already in there moves down. I guess this doesn't happen when things are added to the bottom instead of the top. I.e. when things are added to the bottom, the contents does not move up. How can I stop the contents moving down?
September 15th, 2013, 04:57 PM
So I decided to use the polling method and I reset the scrollTop every time new content is added to the scoll div. This has sorted most of the problems and it works much better than I expected.
However there is one problem left. The solution works when using the mouse scroll wheel and the up arrow on top of the scroll bar but not when dragging the scrollbar. I have noticed on facebook that when you drag down using the scrollbar, it resets the position of the bar when the news feed is loaded but then it doesn't snap back to where mouse pointer is. Mine does snap back.