How to scroll to bottom of page, when a new message is sent - Socket.io

» javascript » How to scroll to bottom of page, when a new message is sent - Socket.io

By : Alexander Constantin

Date : January 12 2021, 01:40 AM

this one helps. I'm attempting to create a chatapp on a webpage. I have a list of messages being sent. Problem is, that the newest messages aren't making the page autoscroll to that message. , Try to scroll using .animate

code :

const $li = $('<li>').text(msg);
$('#messages').append($li);

$('html, body').animate({
   scrollTop: $li.offset().top
}, 2000); // change the animation delay to whatever you like

Share :

Make android bottom button bar appear only when I scroll to the bottom of the page

By : petrys

Date : March 29 2020, 07:55 AM

wish helps you This should get you started, check in onscrollstatechanged with row is visible and then take th correct action like toggle or animate the button bar if you use visibility gone the list view will take place on the part where the button bar was before. This way you don't have empty space at the bottom:

code :

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {

    if (scrollState == 0 && mListContent.getLastVisiblePosition() == 0
            && buttonbar.getVisibility() == View.GONE) {
        toggleButtonbar();
    } else if (mListContent.getLastVisiblePosition() != 0
            && buttonbar.getVisibility() == View.VISIBLE) {
        toggleButtonbar();
    }
}

jQuery scroll only detecting scroll at very top of the page and bottom?

By : Jörg Schoppe

Date : March 29 2020, 07:55 AM

may help you . As you can see above I have in my CSS html, body { height:100% } this was the culprit. Really strange. Got it working now. for your time.

Scroll down to bottom when new message is sent

By : Pilot M Kafwihi

Date : March 29 2020, 07:55 AM

Hope this helps I wouldn't use an interval function to scroll down, cause you scroll every 500 millis with your implementation. I think you have a function, that adds new messages and is called on incoming messages:

code :

function addMessage() {
   // here you add the new message to DOM
   // ...

   // then you can scroll down once to show the new messages
   var elem = document.getElementById('Commentbox');
   elem.scrollTop = elem.scrollHeight;
}

How to make the page to scroll down automatically to the bottom as soon as message is sent or message is opened in angul

By : user453069

Date : March 29 2020, 07:55 AM

Any of those help Here is a solution in angular way:
I added #scrollCottom template variable. You can use ViewChild to get the Element reference and should check the scroll bottom issue.

code :

import { AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class YourComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollBottom') private scrollBottom: ElementRef;

    ngOnInit() {
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
     this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.scrollBottom.nativeElement.scrollTop = this.scrollBottom.nativeElement.scrollHeight;
        } catch(err) { }
    }
}

<ul #scrollBottom>
  <li *ngFor="let reply of message_show.messages">
    <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
    <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
    <p>{{reply.text}}</p>
  </li>
</ul>