search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Infinite scroll - when on paged home page, allow IS to load previous posts when scrolling up. #4688

Open pszafer opened 8 years ago

pszafer commented 8 years ago

Hello, I configured to have 'wrapper' => false , because of this bug: https://github.com/Automattic/jetpack/issues/222

But now another bug. Let's say I load 12 posts at startup and next posts are loaded via IS. I'm at the post 30 (loaded by IS).

When I refresh page, browser will took me to the post 12, because max height of the window.

I'm looking for the way to simulate scrolling down so IS will load more posts and then I will use jquery scrollTop function.

Tested on TwentyFourteen, Twentysixteen, pinboard and my theme.

jeherve commented 8 years ago

When I refresh page, browser will took me to the post 12, because max height of the window.

When you refresh the page, you should be redirected to the third page, page/3/, unless I'm missing something. Could you post your site URL here, so I can have a look?

If you want it to remain private, you can also contact us via this contact form: http://jetpack.com/contact-support/

pszafer commented 8 years ago

Live site doesn't have enough posts yet... http://velomelon.com/en/ But you can see the same effect perfectly in the site of someone who asked for help few years ago - http://dbd.alex.clst.org/ - scroll down to post "21 May 2014 Watch my Commencement Online" with youtube movie and refresh page. Browser will scroll to posts returned by get, and not inifinite scroll.

As for me I think I have to turn off infinite scroll for now because I have to choose between refreshing and be in the top of the page or between this https://github.com/Automattic/jetpack/issues/222 (for me it is a bug, people don't know how to navigate in page if browser refresh and have only like 6 posts... )

jeherve commented 8 years ago

http://dbd.alex.clst.org/ - scroll down to post "21 May 2014 Watch my Commencement Online" with youtube movie and refresh page. Browser will scroll to posts returned by get, and not inifinite scroll.

I could reproduce. That's not the usual Infinite Scroll behaviour, though. Check my own site, for example: https://jeremy.hu/

When scrolling down, the page URL is updated to page/2/, page/3/, ... We use the HTML5 History API history.pushState to update the page URL to match the posts being displayed, so when you refresh the page you get back to the same set of posts.

I'm not sure why that's not working on this site; we'd need to look at the other plugins on that site to see if there is a conflict somewhere.

Could you try deactivating all other plugins on your own site, and let me know if you find a conflict?

pszafer commented 8 years ago

@jeherve

Check my own site, for example: https://jeremy.hu/

I'm on your site https://jeremy.hu and I have other behaviour, but still in my opinion unacceptable

When scrolling down, the page URL is updated to page/2/, page/3/, ... We use the HTML5 History API history.pushState to update the page URL to match the posts being displayed, so when you refresh the page you get back to the same set of posts.

I'm not sure why that's not working on this site; we'd need to look at the other plugins on that site to see if there is a conflict somewhere.

if wrapper is set to false then url is not updated. I have to set it to true, so url would be updated, but behaviour (which is visible the best in the mobile) that after refreshing the page user can see only posts from /page/X/ and older and can't scroll up to /page/X-1/ is unacceptable.

Could you try deactivating all other plugins on your own site, and let me know if you find a conflict?

In my site I have too much in conflict with the way InfiniteScroll was developed. As for now:

Scroller.prototype.check = function() {
    var container = this.element.offset();
    // If the container can't be found, stop otherwise errors result
    if ( 'object' !== typeof container ) {
        return false;
    }
    var bottom = this.window.scrollTop() + this.window.height(),
        threshold = container.top + this.element.outerHeight(false) - (this.window.height() * 2);
    return bottom > threshold;
};

I tried to repair InfiniteScroll for you and have both me and you happier, but for now I'm stuck. I tried to use function jQuery($container).scroll(ScrollPosition);, but somehow InfiniteScroll loaded some posts 2 times. But this topic is not related with this issue...

jeherve commented 8 years ago

I'm on your site https://jeremy.hu and I have other behaviour

There are definitely issues there, I was able to reproduce the issues you mentioned. However, I can't reproduce the problem on a site running Twenty Fifteen, so the issue could be related to my theme. I'll see if I can reproduce in other themes.

after refreshing the page user can see only posts from /page/X/ and older and can't scroll up to /page/X-1/ is unacceptable.

That's indeed the expected behaviour right now. I can see how it could be useful to change that, though. If you were to find a solution to load previous pages as well as next pages from Infinite Scroll, we'd be happy to review this!

In my site I have too much in conflict with the way InfiniteScroll was developed.

With such custom implementation, you will indeed need to develop some work-arounds. I'd recommend checking this tutorial on the use of post-load, it could help!

pszafer commented 8 years ago

@jeherve I'll try to do this. The way I see it:

$args = array ( 'paged' => 1 );
query_posts( $args );

But few things need to know:

replaceState has advantage over pushState and window.location.hash. It is not allowing user to click back button (in infinite scroll we don't need it). Maybe there are other reasons. Please let me know :)

stale[bot] commented 6 years ago

This issue has been marked as stale. This happened because:

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.