New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling progress should be persisted #337

Closed
sindresorhus opened this Issue Feb 19, 2013 · 24 comments

Comments

5 participants
@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

There has been discussion about this feature. The problem here is that we have to work with browsers that have lower standards than Discourse. We cannot just say "Well piss off IE 8" like was done with Discourse. Of course we all hope to see a day when feature parity between browsers is not an issue, but for the time being this is not the case.

This featured will not be implemented as a part of the plugin, however you are free to implement this yourself as discussed in the aforementioned issue.

Contributor

67726e commented Feb 19, 2013

There has been discussion about this feature. The problem here is that we have to work with browsers that have lower standards than Discourse. We cannot just say "Well piss off IE 8" like was done with Discourse. Of course we all hope to see a day when feature parity between browsers is not an issue, but for the time being this is not the case.

This featured will not be implemented as a part of the plugin, however you are free to implement this yourself as discussed in the aforementioned issue.

@67726e 67726e closed this Feb 19, 2013

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

I think it would be helpful to users if you would show an example on how something like this could be implemented using the appendCallback. Otherwise people won't think about doing it and it will only hurt the user, which has to keep scrolling back because it never saved the state.

Oh, and the readme says appendCallback: true, shouldn't that be appendCallback: function () {}?

sindresorhus commented Feb 19, 2013

I think it would be helpful to users if you would show an example on how something like this could be implemented using the appendCallback. Otherwise people won't think about doing it and it will only hurt the user, which has to keep scrolling back because it never saved the state.

Oh, and the readme says appendCallback: true, shouldn't that be appendCallback: function () {}?

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

Well it is really a matter of opinion. Personally, if I went back to a page and the content was different, I would think something is wrong with the page. If I perform the same GET request twice, and I haven't done any operations to change the state of the resource in between these two GET requests, the same thing should happen.

As for the appendCallback, that actually tells Infinite-Scroll wether it should append the data itself or not. The actual user-specified callback is written as a callback to the infinitescroll call as so:

$("#selector").infinitescroll({
  // Options
}, function(newElements, data, url) {
  // Do some magic here
});

Sorry about the documentation or the lack thereof. I'm trying to get everything written up in the Wiki.

Contributor

67726e commented Feb 19, 2013

Well it is really a matter of opinion. Personally, if I went back to a page and the content was different, I would think something is wrong with the page. If I perform the same GET request twice, and I haven't done any operations to change the state of the resource in between these two GET requests, the same thing should happen.

As for the appendCallback, that actually tells Infinite-Scroll wether it should append the data itself or not. The actual user-specified callback is written as a callback to the infinitescroll call as so:

$("#selector").infinitescroll({
  // Options
}, function(newElements, data, url) {
  // Do some magic here
});

Sorry about the documentation or the lack thereof. I'm trying to get everything written up in the Wiki.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

Well it is really a matter of opinion. Personally, if I went back to a page and the content was different, I would think something is wrong with the page. If I perform the same GET request twice, and I haven't done any operations to change the state of the resource in between these two GET requests, the same thing should happen.

I think you're misunderstanding. A site has pages like http://website.com/page/1. I would then want the infinite scrolling to change the 1 to 2 when i scrolled past the last post on page 1. That way I could share a link to the correct site or come back some other time.

Then have a simple example like:

$("#selector").infinitescroll({
  // Options
}, function(newElements, data, url) {
  history.replaceState('foo');
});

Just to show it's possible and how it could be done. It would help a lot.

sindresorhus commented Feb 19, 2013

Well it is really a matter of opinion. Personally, if I went back to a page and the content was different, I would think something is wrong with the page. If I perform the same GET request twice, and I haven't done any operations to change the state of the resource in between these two GET requests, the same thing should happen.

I think you're misunderstanding. A site has pages like http://website.com/page/1. I would then want the infinite scrolling to change the 1 to 2 when i scrolled past the last post on page 1. That way I could share a link to the correct site or come back some other time.

Then have a simple example like:

$("#selector").infinitescroll({
  // Options
}, function(newElements, data, url) {
  history.replaceState('foo');
});

Just to show it's possible and how it could be done. It would help a lot.

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

It's silently changing what happens when I navigate back. To me, I think I'm creating the same request, but instead I get a completely different page as a result. It is the same effect.

As for the documentation, it is a work in progress but I will put in an example of this when I get to the callback functionality.

Contributor

67726e commented Feb 19, 2013

It's silently changing what happens when I navigate back. To me, I think I'm creating the same request, but instead I get a completely different page as a result. It is the same effect.

As for the documentation, it is a work in progress but I will put in an example of this when I get to the callback functionality.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

Still not sure what you're trying to say, but replaceState(), not pushState().

sindresorhus commented Feb 19, 2013

Still not sure what you're trying to say, but replaceState(), not pushState().

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

It breaks the expected behavior. If I was at /resource/1 and it changes me to /resource/3, the suddenly pages /resource/1 and /resource/2 will be missing from my page. To me, this is worse behavior than if I had to simply scroll back down to /resource/3.

Contributor

67726e commented Feb 19, 2013

It breaks the expected behavior. If I was at /resource/1 and it changes me to /resource/3, the suddenly pages /resource/1 and /resource/2 will be missing from my page. To me, this is worse behavior than if I had to simply scroll back down to /resource/3.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

If I was at /resource/1 and it changes me to /resource/3, the suddenly pages /resource/1 and /resource/2 will be missing from my page

How so?

It doesn't change you to anything. All it does is change to url so if you come back you will come to the right post instead of starting on page 1 again.

sindresorhus commented Feb 19, 2013

If I was at /resource/1 and it changes me to /resource/3, the suddenly pages /resource/1 and /resource/2 will be missing from my page

How so?

It doesn't change you to anything. All it does is change to url so if you come back you will come to the right post instead of starting on page 1 again.

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

My point is that is not the proper behavior. If I was at /page/1, navigate away, and then press back in my browser and I end up getting the data for /page/3, this is wrong. Suddenly I am missing the first two pages of data.

Contributor

67726e commented Feb 19, 2013

My point is that is not the proper behavior. If I was at /page/1, navigate away, and then press back in my browser and I end up getting the data for /page/3, this is wrong. Suddenly I am missing the first two pages of data.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

If I was at /page/1, navigate away, and then press back in my browser and I end up getting the data for /page/3

You would of course get those pages if you scrolled upwards on page3, since they would be loaded in, just like the downwards. Discourse does this.

sindresorhus commented Feb 19, 2013

If I was at /page/1, navigate away, and then press back in my browser and I end up getting the data for /page/3

You would of course get those pages if you scrolled upwards on page3, since they would be loaded in, just like the downwards. Discourse does this.

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

Infinite-Scroll is intended to be a drop-in progressive enhancement. Unless a user configures his or her server to do this, this would not happen. This is something a user would need to put into the application on the server side, with some minimal configuration that could be accomplished with the plugin using the appending callback.

Contributor

67726e commented Feb 19, 2013

Infinite-Scroll is intended to be a drop-in progressive enhancement. Unless a user configures his or her server to do this, this would not happen. This is something a user would need to put into the application on the server side, with some minimal configuration that could be accomplished with the plugin using the appending callback.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

Unless a user configures his or her server to do this, this would not happen.

Can you expand on why the user would need to do that?

It seems pretty straight forward to me. The user already have static page numbers /page/2. All we do is to dynamically create them when infinite scrolling. On refresh that static page is loaded as before the plugin was used.

sindresorhus commented Feb 19, 2013

Unless a user configures his or her server to do this, this would not happen.

Can you expand on why the user would need to do that?

It seems pretty straight forward to me. The user already have static page numbers /page/2. All we do is to dynamically create them when infinite scrolling. On refresh that static page is loaded as before the plugin was used.

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

Are you proposing that this plugin caches the previous pages and the loads them later? How do you suggest this be done in a manner that supports all platforms? Again, unlike Discourse, we support much older browsers than their low-bar of IE 8. That makes it very hard to do.

Of course one could argue that the plugin could iterate backwards and load each additional page via AJAX, but I don't like the case where you wind up spinning off 5 or 10 or more AJAX requests immediately on load. That alone makes me cringe.

Contributor

67726e commented Feb 19, 2013

Are you proposing that this plugin caches the previous pages and the loads them later? How do you suggest this be done in a manner that supports all platforms? Again, unlike Discourse, we support much older browsers than their low-bar of IE 8. That makes it very hard to do.

Of course one could argue that the plugin could iterate backwards and load each additional page via AJAX, but I don't like the case where you wind up spinning off 5 or 10 or more AJAX requests immediately on load. That alone makes me cringe.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

Of course one could argue that the plugin could iterate backwards and load each additional page via AJAX

It would do the exact same thing as it does when scrolling downwards, just the opposite. When you scroll upwards it will load the previous page.

sindresorhus commented Feb 19, 2013

Of course one could argue that the plugin could iterate backwards and load each additional page via AJAX

It would do the exact same thing as it does when scrolling downwards, just the opposite. When you scroll upwards it will load the previous page.

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 19, 2013

Contributor

I could see this as a behavior add-on for the plugin, but not in the core of the plugin.

Contributor

67726e commented Feb 19, 2013

I could see this as a behavior add-on for the plugin, but not in the core of the plugin.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 19, 2013

Sure, all I'm asking for is that it's easy for devs to find, so that the users can experience a more usable infinite scrolling. Either as a plugin or an example in the readme.

sindresorhus commented Feb 19, 2013

Sure, all I'm asking for is that it's easy for devs to find, so that the users can experience a more usable infinite scrolling. Either as a plugin or an example in the readme.

@67726e 67726e reopened this Feb 19, 2013

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 20, 2013

Contributor

I think there have been advancements in the UX of infinite scrolling since this plugin launched. The eviltrout post has good ideas.. http://adactio.com/journal/5793/ covered kyle's ideas. And http://dl.dropbox.com/u/131998/smugmug/node-scroll-info/tests/manual/test-body.html introduced a smoother, no-wait, UX that i think is a good idea.

This probably requires a designer's attention but I think this plugin could stand to experiment some with the UX. Or at least host a discussion on options. A poll perhaps?

Contributor

paulirish commented Feb 20, 2013

I think there have been advancements in the UX of infinite scrolling since this plugin launched. The eviltrout post has good ideas.. http://adactio.com/journal/5793/ covered kyle's ideas. And http://dl.dropbox.com/u/131998/smugmug/node-scroll-info/tests/manual/test-body.html introduced a smoother, no-wait, UX that i think is a good idea.

This probably requires a designer's attention but I think this plugin could stand to experiment some with the UX. Or at least host a discussion on options. A poll perhaps?

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 20, 2013

Contributor

@paulirish At the very least I think this would be a good behavior to have available. I also like the no wait idea as well. Both would be good to create and have, although it raises the question of how to handle behaviors loading in the future as we may have someone who wants to use say a "no-wait" with a "Cufon" behavior, and the current loading mechanism doesn't support this. But that is an issue by itself.

Contributor

67726e commented Feb 20, 2013

@paulirish At the very least I think this would be a good behavior to have available. I also like the no wait idea as well. Both would be good to create and have, although it raises the question of how to handle behaviors loading in the future as we may have someone who wants to use say a "no-wait" with a "Cufon" behavior, and the current loading mechanism doesn't support this. But that is an issue by itself.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 23, 2013

Good stuff.

A poll of what?

sindresorhus commented Feb 23, 2013

Good stuff.

A poll of what?

@67726e

This comment has been minimized.

Show comment
Hide comment
@67726e

67726e Feb 24, 2013

Contributor

@sindresorhus I'm guessing a poll of opinions regarding this particular UX.

Contributor

67726e commented Feb 24, 2013

@sindresorhus I'm guessing a poll of opinions regarding this particular UX.

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 24, 2013

Contributor

yeah.

On Sat, Feb 23, 2013 at 6:41 PM, Glenn Nelson notifications@github.comwrote:

@sindresorhus https://github.com/sindresorhus I'm guessing a poll of
opinions regarding this particular UX.


Reply to this email directly or view it on GitHubhttps://github.com/metafizzy/infinite-scroll/issues/337#issuecomment-14002324.

Contributor

paulirish commented Feb 24, 2013

yeah.

On Sat, Feb 23, 2013 at 6:41 PM, Glenn Nelson notifications@github.comwrote:

@sindresorhus https://github.com/sindresorhus I'm guessing a poll of
opinions regarding this particular UX.


Reply to this email directly or view it on GitHubhttps://github.com/metafizzy/infinite-scroll/issues/337#issuecomment-14002324.

@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Feb 24, 2013

Sure, a poll is always nice to gauge what to focus on. Go for it. At least you will get some response ;)

sindresorhus commented Feb 24, 2013

Sure, a poll is always nice to gauge what to focus on. Go for it. At least you will get some response ;)

@confilemg

This comment has been minimized.

Show comment
Hide comment
@confilemg

confilemg Mar 22, 2013

@sindresorhus What you are searching for is:

$("#selector").infinitescroll({
  // Options
}, function(newElements, data, url) {
  history.replaceState({infiniteScroll:true}, null, url);
});

This will save the current url in browser url field. So when the user clicks on a link and then hits the back button he will come back to the page where he has been before.

confilemg commented Mar 22, 2013

@sindresorhus What you are searching for is:

$("#selector").infinitescroll({
  // Options
}, function(newElements, data, url) {
  history.replaceState({infiniteScroll:true}, null, url);
});

This will save the current url in browser url field. So when the user clicks on a link and then hits the back button he will come back to the page where he has been before.

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Jun 26, 2017

Member

Infinite Scroll v3 is out!. It's an all new re-write, so take a look at how to upgrade from v2.

Infinite Scroll v3 supports this feature. v3 manipulates browser URL and history via HTML5 history API. See history option. Now you can scroll a couple pages, visit a different link, hit back, and you'll be back at the same page. Additionally I've added behavior so that the scroll position should be maintained (although it can be off due to first and subsequent pages having different page layouts).

Try out Infinite Scroll v3 full page demo

I recommend upgrading to v3. Thanks all for the input over the years. I'm delighted to finally ship this one. Please open a new issue if you run into trouble with Infinite Scroll v3. 🌈🐻

Member

desandro commented Jun 26, 2017

Infinite Scroll v3 is out!. It's an all new re-write, so take a look at how to upgrade from v2.

Infinite Scroll v3 supports this feature. v3 manipulates browser URL and history via HTML5 history API. See history option. Now you can scroll a couple pages, visit a different link, hit back, and you'll be back at the same page. Additionally I've added behavior so that the scroll position should be maintained (although it can be off due to first and subsequent pages having different page layouts).

Try out Infinite Scroll v3 full page demo

I recommend upgrading to v3. Thanks all for the input over the years. I'm delighted to finally ship this one. Please open a new issue if you run into trouble with Infinite Scroll v3. 🌈🐻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment