Infinite scroll doesn't work

  • In Setting->Reading, the “To infinity and beyond” row shows “We’ve changed this option to a click-to-scroll version for you since you have footer widgets in Appearance → Widgets, or your theme uses click-to-scroll as the default behavior.

    But I don’t have any footer widgets in “Appearance → Widgets”. I only see “Sidebar” there.

    To make it works, there is no “More Posts” button on the category page (e.g. http://zhengziying.com/category/life/). Although there is a “More Posts” button at the bottom of the home page (http://zhengziying.com/).

    I’m Ok with either way:
    1. I can enable infinite scroll on home page and category pages, or
    2. There is a “More Posts” button on both Home page and category pages.

    Can you help me figure it out?

    Thanks!
    -eric

    The blog I need help with is: (visible only to logged in users)

  • Hi Eric,

    It looks like maybe there is some Custom CSS hiding the navs. This is what I see in the page:

    .nav-links {
      display: none;
    }

    Try going to Appearance -> Customize -> CSS and removing this CSS if it’s in there.

  • Thanks mmcalister for looking into it promptly!

    To report what I have tried and seen:

    1. I removed the .nav-links section from the custom CSS. It doesn’t seem to change: still no “More Posts” button in category page, nor infinite scroll.

    2. I found that the “Most Posts” button is in a different div: <div id=”infinite-handle”>, rather than <div class=”nav-links”>. On home page, there is both <div class=”nav-links”> and <div id=”infinite-handle”>. But there is no <div id=”infinite-handle”> on category page. I guess that’s why removing .nav-links from custom CSS didn’t change anything.

    3. I found that in the category page (example), the entire <nav class=”navigation paging-navigation” role=”navigation”> section has “display: none”:

    media="all"
    .infinite-scroll .paging-navigation, .infinite-scroll.neverending .site-footer {
      display: block;
    }

    I guess that’s why regardless whether I put “display: none” on .nav-links in custom CSS or not, there is never a “Older Posts” button on category page.
    In F12, I changed it to “display: block” and now can see the “Older Posts” and “Newer Posts” button at the bottom of category page.

    Any recommendation what I should do?

    To clarify what I want: I want to have infinite scroll, but I’m also OK with either way, the old-school navigation (“Older Posts” and “Newer Posts” buttons).

  • Btw, I tried to put the following in custom CSS:

    .infinite-scroll .paging-navigation,
    .infinite-scroll.neverending .site-footer {
      display: block !important;
    }
    
    #infinite-handle {
    	display: none !important;
    }

    That will suppress the “More Posts” button (#infinite-handle) on the home page, and show “Older Posts” and “Newer Posts” on home, category and monthly archive pages.

    I guess that will be my last resort — it will just give me the old school navigation across the board.

    Still looking for a way to have infinite scroll on home, category and monthly archive pages.

  • Hi there,

    We just released an update for this bug and it should be available on your site shortly!

  • The topic ‘Infinite scroll doesn't work’ is closed to new replies.