Company News

Infinite Scrolling in SharePoint Quick Tip

January 23, 2017

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):

var 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!

Leave a Reply

Matt Longpre

Matt Longpre

Subscribe via Email

Categories

Powered by...

itgroove Corporate Profile
Connect With Us
%d bloggers like this: