如何在使用 Simplebar js 时以编程方式滚动到 div 底部

Question

我正在使用Simplebar和 Angular 1，每当有新消息或单击菜单项时，我需要滚动到聊天框 (div) 的底部。

这是我的 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;
}

这是我的 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>

我收到这个错误：

Cannot set property 'SimpleBar' of null

我还使用 Flexbox 布局将消息保留在底部（这从 simplebar 开始也不起作用。但我当时遇到了 1 个问题）

Answer 1

用这个

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

可以body根据自己的dom元素进行替换