{"id":139,"date":"2017-01-23T01:29:20","date_gmt":"2017-01-23T01:29:20","guid":{"rendered":"https:\/\/itgroove.net\/bangimportant\/?p=139"},"modified":"2023-02-24T21:39:33","modified_gmt":"2023-02-24T21:39:33","slug":"infinite-scrolling-sharepoint-quick-tip","status":"publish","type":"post","link":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/","title":{"rendered":"Infinite Scrolling in SharePoint Quick Tip"},"content":{"rendered":"<p>If you&#8217;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.<\/p>\n<p>Ordinarily, you may have a section of&nbsp;your scrolling script that looks something like this (using jQuery):<\/p>\n<p><code>ar closeToBottom = ($(window).scrollTop() + $(window).height() &gt; $(document).height() - 100);<br \/>\nif (closeToBottom) {<br \/>\n\/\/ call your function that loads more data<br \/>\n}<br \/>\n<\/code><\/p>\n<p>To make this work in SharePoint, we need to replace <strong>$(window)<\/strong> with <strong>$(&#8220;#s4-workspace&#8221;)<\/strong>, and <strong>$(document)<\/strong> with <strong>$(&#8220;s4-bodyContainer&#8221;)<\/strong>. Like so:<\/p>\n<p><code>var closeToBottom = ($(\"#s4-workspace\").scrollTop() + $(\"#s4-workspace\").height() &gt; $(\"#s4-bodyContainer\").height() - 100);<br \/>\nif (closeToBottom) {<br \/>\n\/\/ call your function that loads more data<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Hope this helps, happy scrolling!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;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 &hellip; <a href=\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/\"><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[4,5,8,9],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Infinite Scrolling in SharePoint Quick Tip - Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Infinite Scrolling in SharePoint Quick Tip - Archive\" \/>\n<meta property=\"og:description\" content=\"If you&#8217;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 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/\" \/>\n<meta property=\"og:site_name\" content=\"Archive\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-23T01:29:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T21:39:33+00:00\" \/>\n<meta name=\"author\" content=\"Matt Lonpre (Alumni)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Lonpre (Alumni)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/\",\"url\":\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/\",\"name\":\"Infinite Scrolling in SharePoint Quick Tip - Archive\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#website\"},\"datePublished\":\"2017-01-23T01:29:20+00:00\",\"dateModified\":\"2023-02-24T21:39:33+00:00\",\"author\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0\"},\"breadcrumb\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Archive\",\"item\":\"https:\/\/regroove.ca\/archive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Infinite Scrolling in SharePoint Quick Tip\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regroove.ca\/archive\/#website\",\"url\":\"https:\/\/regroove.ca\/archive\/\",\"name\":\"Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regroove.ca\/archive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0\",\"name\":\"Matt Lonpre (Alumni)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g\",\"caption\":\"Matt Lonpre (Alumni)\"},\"url\":\"https:\/\/regroove.ca\/archive\/author\/mlongpre\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Infinite Scrolling in SharePoint Quick Tip - Archive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/","og_locale":"en_US","og_type":"article","og_title":"Infinite Scrolling in SharePoint Quick Tip - Archive","og_description":"If you&#8217;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 &hellip;","og_url":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/","og_site_name":"Archive","article_published_time":"2017-01-23T01:29:20+00:00","article_modified_time":"2023-02-24T21:39:33+00:00","author":"Matt Lonpre (Alumni)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Matt Lonpre (Alumni)","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/","url":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/","name":"Infinite Scrolling in SharePoint Quick Tip - Archive","isPartOf":{"@id":"https:\/\/regroove.ca\/archive\/#website"},"datePublished":"2017-01-23T01:29:20+00:00","dateModified":"2023-02-24T21:39:33+00:00","author":{"@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0"},"breadcrumb":{"@id":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/regroove.ca\/archive\/2017\/01\/23\/infinite-scrolling-sharepoint-quick-tip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Archive","item":"https:\/\/regroove.ca\/archive\/"},{"@type":"ListItem","position":2,"name":"Infinite Scrolling in SharePoint Quick Tip"}]},{"@type":"WebSite","@id":"https:\/\/regroove.ca\/archive\/#website","url":"https:\/\/regroove.ca\/archive\/","name":"Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regroove.ca\/archive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0","name":"Matt Lonpre (Alumni)","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g","caption":"Matt Lonpre (Alumni)"},"url":"https:\/\/regroove.ca\/archive\/author\/mlongpre\/"}]}},"_links":{"self":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/139"}],"collection":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":2,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":197,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/139\/revisions\/197"}],"wp:attachment":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}