I’ve been asked to design a site that continuously expands as the user keeps scrolling. Im experienced in JavaScript but I’ve never came across anything that could manage this. Popular sites that use this technique are Twitter and Facebook. I know that I’m going to need AJAX to load more content but I’m unsure as to how the browser will know that the user is nearing the bottom of the page?
Share
You can do this using three JavaScript functions. The first is
window.scrollY. This function will give you the height position on the webpage (i.e. if you are at the top it’s 0, as you scroll down it increases).The second is
document.body.scrollHeightThis gives you the total height of the window, including the scroll.The final function is
window.innerHeight. This gives you the height of the window that a user can see (the height of the visible part).Using these three functions you can get the top and bottom positions of the browser window and the size of the entire page. From that you can figure out where the user is on the page and determine if the page should expand.