How to programmatically scroll to bottom of a div while using Simplebar js

I am using Simplebar and angular 1 and I need to scroll to the bottom of a chatbox (div) whenever there is a new message or when you click on the menu item.

Here is my scroll function in my chatController.js

//Function to scroll the chatbox to the bottom.
function scrollToBottom(){
    var objDiv = new SimpleBar(document.getElementById('#simple'));
    objDiv.SimpleBar.getScrollElement()

    // These 2 lines of code did the trick when I didn't use Simplebar
    //var objDiv = document.getElementById("simple");
    objDiv.scrollTop = objDiv.scrollHeight;
}

And here is my html

<div id="chatbox">
    <div class="wrapper" data-simplebar id="simple">
        <div class="chatbar">
            <div>
                <p class="left">User</p>
                <p class="right">Admin</p>
            </div>
        </div>
        <div class="empty"></div>
        <div class="messages">
            <div ng-repeat="m in messages | filter: {uc_id:userCompany}:true" 
                 ng-hide="userCompany==null" >
                <div class="chat"
                     title="Sent: {{m.timestamp}}"  
                     ng-class="(m.sentByUser ? 'left' : 'right') + ' ' + 
                               (m.sentByUser && $last ? 'unread' : '')" >
                    {{m.message}}
                </div><br><br>
            </div>
        </div>
    </div>
</div>

I’m gaining this error:

Cannot set property 'SimpleBar' of null

I am also using a flexbox layout to keep the messages on the bottom (this also isn’t working since simplebar. but i’m taking on 1 problem at the time)

Answer

Use this

$('body').scrollTop($('body').height());

You can replace body according to your dom element

Advertisement

Answer