Check the comments in code for explanations. This example relies on jQuery.<\/p>\n
function scroll_item() {\r\n var tracked_item = $(\".list_item\").last(); \/\/ grabs the last \"item\" with the class list_item\r\n\r\n \/\/ $(window).outerHeight() is the height of the browser window\r\n \/\/ tracked_item.offset().top is the vertical amount of pixels from(below) the top of the web page document\r\n\r\n var scrollPosition = tracked_item.offset().top - $(window).outerHeight(); \/\/ figures out how many pixels below the\r\n \/\/ initial browser window is the tracked item. So if the window is 700px vertically and the item that is being tracked\r\n \/\/ is 1200px from the very top of the document.. then the user needs to scroll 500 more pixels to reach the\r\n \/\/ tracked item.\r\n\r\n $(window).scroll(function(event) {\r\n \/\/ applies an event listener to the document window\r\n \/\/ $(window).scrollTop() is how many pixels that are hidden(above) the element ( window in this case )\r\n if (scrollPosition > $(window).scrollTop()) {\r\n \/\/ checks if there are more pixels left to scroll(scrollPosition)\r\n \/\/ then what has been scrolled already($(window).scrollTop())\r\n return; \/\/ since the amount left is greater then what has been scrolled... do nothing, tracked_item isn't visible yet.\r\n }\r\n \/\/ finally the amount of pixels scrolled ($(window).scrollTop()) is larger then the amount needed to scroll\r\n \/\/ to the tracked_item.\r\n $(this).off(event); \/\/ temporarily remove this scroll event from the window.\r\n add_to_items(); \/\/ lazy load and append new item. If desired, at the end of the add_to_items make\r\n \/\/ sure to re-call scroll_item() to reattached the event listener to the window.\r\n });\r\n}\r\n<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Check the comments in code for explanations. This example relies on jQuery. function scroll_item() { var tracked_item = $(“.list_item”).last(); \/\/ grabs the last “item” with the class list_item \/\/ $(window).outerHeight() is the height of the browser window \/\/ tracked_item.offset().top is the vertical amount of pixels from(below) the top of the web page document var scrollPosition […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-326","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":1,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/326\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}