Home>

I want to create a portfolio site on Tumblr and want to implement jQuery's infinite-scroll for readability. I have little knowledge of JavaScript as well as jQuery, but I would like to implement it at all costs.

In addition, I referred to the following two sites.

https://on-ze.com/archives/2486#i

It seems that both of them have been successfully loaded in the operation check, but even if I press the "Next" button, the page transitions as usual and it does not work.

No error message is displayed, and the situation is exactly the same as without infinite-scroll implementation.

Corresponding source code
<!-Omitted->
<script src = "https://static.tumblr.com/wpbpbhk/FRFqk2fty/jquery-3.5.1.min.js"></script>
<script src = "https://static.tumblr.com/wpbpbhk/Sqgqk1h56/infinite-scroll.pkgd.min.js"></script>

<script>
$(function () {
    $('#wrapper'). infinitescroll ({
        navSelector: ".pagination",
NextSelector: ".next-btn a",
        itemSelector: "#contents"
    });
});</script>

</head>
<body>

<!-Omitted->

       
       {block: Posts}
      <!-#contents->specified in itemSelector
       
     <!-post: image->
          {block: Photo}
              {LinkOpenTag}
              
                 
              {LinkCloseTag}
              {block: Caption}
                
                 {Caption}
                
              {/ block: Caption}
          {/ block: Photo}
    
  </article>
    
          {/ block: Posts}
          
<!-Pagination->
         <!-.pagination specified in navSelector->
          {block: Pagination}
          {block: PreviousPage}
            ≪ Prev  
{/ block: PreviousPage}
{block: NextPage}<!-.next-btn->specified in nextSelector
  Next ≫  
{/ block: NextPage}
{/ block: Pagination}

          {/ block: IndexPage}

        <!-Omitted->
</body>
</html>
What I tried

Replace "$('# wrapper'). Infinitescroll ({" with "$('# contents'). Infinitescroll ({",
I tried replacing "navSelector:" .pagination "" with "navSelector:" .next-btn "", but the situation didn't change at all.

  • Answer # 1

    I'm not familiar with this library itself, but I think the site I'm referring to is different from the JS I'm loading.
    The reference site seems to be information around 2015, so the specifications may have changed.
    As for the file name, the reference site is "jquery.infinitescroll.min.js", but the code described is "infinite-scroll.pkgd.min.js".

    https://infinite-scroll.com/
    Here, which seems to be the official website, it is written as $('selector'). InfiniteScroll (), and S is capitalized.

    When developing scripts, it is basic to open the Console tab with the developer tools of the browser and check for errors. (Although it is often difficult to understand)
    I think you should download the official one from the original home and use it without referring to the resources of tumblr.com.

Related articles