{"id":6626,"date":"2019-04-13T12:26:46","date_gmt":"2019-04-13T12:26:46","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=6626"},"modified":"2021-04-15T12:19:06","modified_gmt":"2021-04-15T12:19:06","slug":"infinite-scroll-feature-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/infinite-scroll-feature-in-amp\/","title":{"rendered":"Infinite Scroll (autoload) Feature in AMP"},"content":{"rendered":"\n<p><strong>Infinite scrolling<\/strong> is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. <\/p>\n\n\n\n<p><strong>Here are the simple steps of infinite scroll.<\/strong><\/p>\n\n\n\n<p>The first thing you need to do is go to your WordPress dashboard and click on <strong>AMP option panel -> Go to Design -> Global -> <\/strong>enable this &#8220;<strong>infinite scroll<\/strong>&#8221; option and after that click on the &#8220;<strong>Save Changes<\/strong>&#8221; button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"485\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-1024x485.png\" alt=\"\" class=\"wp-image-18061\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-1024x485.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-300x142.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-768x363.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/55.png 1217w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Infinite Scroll (Experimental):<\/strong> First you enable this option infinite scroll will be displayed on your AMP pages.<\/li><li><strong>Home &amp; Archives:<\/strong> If you want to show infinite scroll in Home &amp; Archives pages than enable this option.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"612\" height=\"76\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/56.png\" alt=\"\" class=\"wp-image-18063\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/56.png 612w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/56-300x37.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/56-50x6.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/56-60x7.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/56-100x12.png 100w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/figure>\n\n\n\n<h4><strong>The output of the Infinite scroll on Home pages in AMP.<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/Recording-1-2.mp4\"><\/video><\/figure>\n\n\n\n<ul><li><strong>Single:<\/strong> If you want to show infinite scroll in Single pages then enable this option.<\/li><li>Once you enable the Single pages option two options will be displayed like &#8220;The same Category&#8221; and &#8220;The same<strong> Tag<\/strong>&#8221; you can enable those options and then click on the \u201c<strong>Save Changes<\/strong>\u201d button.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"680\" height=\"207\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/59.png\" alt=\"\" class=\"wp-image-18068\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/59.png 680w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/59-300x91.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/59-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/59-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/59-100x30.png 100w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4><strong>The output of the Infinite scroll on single pages in AMP.<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/Recording-2.mp4\"><\/video><\/figure>\n\n\n\n<ul><li><strong>Same Category:<\/strong> Once you enable this option infinite scroll show in the Same Category. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"579\" height=\"128\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/57.png\" alt=\"\" class=\"wp-image-18065\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/57.png 579w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/57-300x66.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/57-50x11.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/57-60x13.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/57-100x22.png 100w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/figure>\n\n\n\n<h4><strong>The output of the Infinite scroll on Same Category in AMP.<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/video-3393539-9529786720163a97859df34e6707afb4.webm\"><\/video><\/figure>\n\n\n\n<ul><li><strong>Same Tag:<\/strong> Once you enable this option infinite scroll show in the Same Tag.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"662\" height=\"197\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/58.png\" alt=\"\" class=\"wp-image-18066\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/58.png 662w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/58-300x89.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/58-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/58-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/04\/58-100x30.png 100w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<h4><strong>The output of the Infinite scroll on Same Tag in AMP.<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"blob:https:\/\/ampforwp.com\/a4d5e5a0-5e3c-48a2-b3cc-abbef0c716ae\"><\/video><\/figure>\n\n\n\n<h3> The Pros and Cons of Infinite Scroll<strong> <\/strong><\/h3>\n\n\n\n<h4><strong>Pros of Infinite scroll:<\/strong><\/h4>\n\n\n\n<ul><li> Once page is loaded Ads are properly display in the infinite scroll. <\/li><\/ul>\n\n\n\n<h4 id=\"mce_20\"><strong>Cons of Infinite scroll:<\/strong><\/h4>\n\n\n\n<ul><li> Display a maximum of three pages on screen at once. <\/li><\/ul>\n\n\n\n<ul><li> amp-analytics is not fully supported this function. <\/li><\/ul>\n\n\n\n<p>  We are working on Infinite scroll and for more details visit this ticket: <\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/ampproject\/amphtml\/issues\/15807\">https:\/\/github.com\/ampproject\/amphtml\/issues\/15807<\/a>  <\/p>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n\n\n\n<p><\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. Here are the simple steps of infinite scroll. The first thing you need to do is go to your WordPress dashboard and click on AMP option panel ->&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[84],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6626"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=6626"}],"version-history":[{"count":54,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6626\/revisions"}],"predecessor-version":[{"id":18074,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/6626\/revisions\/18074"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=6626"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=6626"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=6626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}