Infinite Scrolling in SharePoint Quick Tip

If you’re trying to set up an infinite scrolling script in SharePoint, you may run into issues calculating the height of the document and comparing it to how far the user has scrolled. This is due to how SharePoint overrides typical scrolling behaviour to allow the ribbon to stay put at the top of the screen and function the way it should.

Ordinarily, you may have a section of your scrolling script that looks something like this (using jQuery):

ar closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
if (closeToBottom) {
// call your function that loads more data
}


To make this work in SharePoint, we need to replace $(window) with $(“#s4-workspace”), and $(document) with $(“s4-bodyContainer”). Like so:

var closeToBottom = ($("#s4-workspace").scrollTop() + $("#s4-workspace").height() > $("#s4-bodyContainer").height() - 100);
if (closeToBottom) {
// call your function that loads more data
}


Hope this helps, happy scrolling!