Search jQuery

jQuery Forum

Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

in Using jQuery • 3 years ago

I'm looking to create reverse infinite scroll inside a div; for a chat application that I'm building. The newly created chat messages are appended below the current stack of loaded messages. However, if the user has to view the old chat messages, they'll have to scroll up.

I'm wondering how to do this inside of a `<div>`; and trigger an event when the scrollbar is say 300 pixels away from the top border of the div.

After searching a bit, I found out that this is the recommended approach -

$('.yourDiv').scroll(function(){
if( $(this).scrollTop()==0 ){
//some code
}
});

Reading the documentation, I'm not sure how do I pass on the `offset` value of 300 px so that the event gets triggered when user is 300px away from hitting the top.

Would appreciate your guidance. Thank you in advance.

Replies(9)

jakecigar

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

You don’t get to pass a threshold value like 300. You do an if statement ,like you have, specifying 300 not 0.

What are you planning on doing if they scroll up?

Why not just set up a scrolling div to hold the messages? That’s what I do in my chat program.

JΛ̊KE

kaustubh

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

Jake, yes, I've a scrolling div and it loads 50 messages when the page loads. If the user wants to see older messages, I need to pull the older messages; which need to load at the top of existing stack of message in set of 50 messages.

However, this should happen when the user scrolls to the top (scrollbar hits the top of the scrollable div). The code I pasted accomplishes this. I could simply make an axios call to the server and get paginated results.

What I'm planning to do is make the axios call right before hitting the top of the div; say when the scrollbar is 300px down the top of the scrollable div.

I've seen 'Infinite-Scroll' plugin does this; but it does not support scrollbar hitting the top. It only makes server calls when the user is scrolling down and the scrollbar is 'x pixels (offset)' away from hitting the bottom of the scrollable div.

Perhaps 'if' isn't the right thing to do. I'm wondering what would be the way to trigger an event so that I can make axios call, get the results and append them at the top.

PS: Thank you for your response. I really appreciate the help you offer to jQuery newbies like me.

jakecigar

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

I wouldn’t expect to find a plugin to do this. "reverse infinite scroll" is pretty specialized.

http://home.jejaju.com/play/scroll%20yourDiv does a mediocre "reverse infinite scroll" based on the wheel event.

I hope if gives you some ideas.

JΛ̊KE

PS I never implemented "reverse infinite scroll" in my chat program. But it has been an idea for a while.

kaustubh

Re: Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

I'm wondering why is it difficult? I just tried and I'm able to fetch messages. Does not look like a complicated problem. Could you tell me why is it specialised?

jakecigar

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

I didn’t say difficult, I said specialized.

Infinite scroll is common. It’s often used for pictures or articles.

Reverse infinite scroll would only be used for some chronological things (like chat messages) or something that starts in the middle/end of the chronology.

I had given it thought over the years. So I shared a page that does what I was thinking.

JΛ̊KE

jakecigar

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

The reason I didn’t use the scroll event is when you are at the top, and you scroll, you don’t get an event

JΛ̊KE

kaustubh

Re: Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

I see. So there's no way to trigger an event when I'm reaching to the top? Say a few pixels away from the top? Your code on view-source:http://home.jejaju.com/play/scroll%20yourDiv pretty much achieves what I'm trying to do.

jakecigar

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

You get a scroll event when you scroll from anywhere, other than the top, to 0(top). If you want to work out code that never leaves the user at 0, go for it.

Feel free to use any of the code or ideas I used it that demo.

JΛ̊KE

watusiware

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

3 years ago

You can use the same technique used to the numerous "pull to refresh" widgets.

One way is to position an element such that some number of pixels at the top are hidden by other content, a header bar, etc. or off-screen to the top. (Use absolute or relative positioning.)

What the user sees as the "top" of the element is not really the top. So, this deals with the 0 problem.

In the pull to refresh scenario, there is typically some "refreshing" animation in this normally hidden part of the element. The user pulls down, sees the animation, and releases. Then typically some Ajax refresh is done.

Maybe you don't like the typical elastic effect and bounce back, but you can change that.

Maybe you are OK with a pull-to-refresh as-is. You can change the working "pull for more" instead of "refresh".

You also may find this useful. It talks about some new CSS attributes. I don't know how widely-available.

https://developers.google.com/web/updates/2017/11/overscroll-behavior

Scroll down to "the chatbox scenario".

Top Reply

Response title

Attachments

jQuery Forum

Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Replies(9)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Re: Reverse Infinite Scrolling Inside Div (Like in a Chat Window)

Statistics

Tags

Actions

Related Posts