Load data on scroll up (chat like behavior)

[gabriel-vasile]

Hello, I have used the library and it works pretty nice, however I was not able to find how to make it behave like a chat, Is there any option to load the data when the container reaches upper scroll limit?

[desandro]

Hello! Thanks for this feature request. No there is no built-in option for this kind of feature.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[techdragon]

@desandro I noticed this by surprise when I was viewing the demo. Reloading on a page numbered URL will allow continued scrolling down through subsidiary pages, but does not allow you to scroll 'back up' to view newer content. I'm not sure if this is the same as the 'chat like behaviour' being asked for here, since presumably that could just be looking for new content to insert at the top of the page (sort of a form of scroll/pull to refresh I suppose?) , but it is definitely is another situation where scrolling up should load newer data.

[desandro]

but does not allow you to scroll 'back up' to view newer content

This is the intended behavior. Scrolling up on a previous page is a significantly more complex UX problem than scrolling down. You have to account for how the up-content affects the current scroll position. Also consider how unloaded images/media would throw off scroll position.

Scrolling up could be a nice feature, but I'm doubtful that Infinite Scroll is the correct plugin for it.

[nickisnoble]

Does anyone have a recommendation for a plugin that can go in both directions?

[DomVinyard]

@nickisnoble we use https://www.npmjs.com/package/react-infinite-scroller

[stefangrosse]

I solving this at the moment with a litle hack in appendItems:

if ( this.options.prepand ) {
	this.element.insertBefore(fragment, this.element.childNodes[0]);
}else{  
	this.element.appendChild( fragment );
}

[TheBigK]

It's really strange that there is no support for scrolling up. I really love this library; but can't use it without the scrollUp support. Can this be introduced?

[Macro-Jackson]

Guys, it seems I am not the only one who likes to have this feature. But can't we develop this together? At least 20 people like to have this so I guess there are enough smart guys here. At least I will commit myself to testing and debugging. But my JS knowledge is not enough to develop this.

[Macro-Jackson]

I solving this at the moment with a litle hack in appendItems:

if ( this.options.prepand ) {
	this.element.insertBefore(fragment, this.element.childNodes[0]);
}else{  
	this.element.appendChild( fragment );
}

@stefangrosse as far as I can see this is not so much "a little hack". I tried your code on line 1071 of infinite-scroll.pkgd.js. Also added the prepand option in the div with the data-infinite-scroll=''; Now it adds the page on top when you scroll down.

So I've added a button on top with the previous page url. But it does not load when I get to the top of the page.

Anyone any idea how I get the script triggered on the top of the page?

[stefangrosse]

I use the button option too and show it above the results "load more" https://infinite-scroll.com/options.html#button

my options:

'button' : '.view-more-button',
'scrollThreshold' : false,

before load, save the items height and after load the next page you must set the scrollthumb position to hold the position to avoid browser scroll. e.g

var holdScrollThumbAtBottom = function () {
			var messageList = jQuery('#messageBoxItem');
			var scrollHeight = messageList.prop("scrollHeight");
			var height = messageList.innerHeight();
			var maxScrollTop = scrollHeight - height;
			messageList.scrollTop((maxScrollTop > 0) ? maxScrollTop : 0);
		}

[Macro-Jackson]

Danke Stefan

So this prevents the problem of adding content above your position in the screen that the browser jumps to another position. Right? Cool, that's a piece of the puzzle. And at least a starting point to get scrolling up working. Now we need to recode this to my favorite framework vanilla JS. I hope I'll handle that with my poor coding skills. If that works I can setup a demo to share.

@stefangrosse, does your modification still work both ways, so auto loading when scrolling down and loading with button "load more" going up?

[SHxKM]

This would be lovely..any plans to implement?