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

Question

我正在使用单杆和角1，每当有新消息或单击菜单项时，我需要滚动到chatbox (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

我还使用了一个柔性盒布局，以保持消息的底部(这也是不工作，因为简单条。但我现在要面对一个问题)

Answer 1

使用这个

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

可以根据dom元素替换body。

Answer 2

这是唯一对我有效的解决办法

HTML

<div id="listing-container" data-simplebar data-simplebar-auto-hide="false">
    <div>data here</div>
</div>

JavaScript

function scrollIt() {
  const scrollElement = 
  document.getElementById('listingcontainer').SimpleBar.getScrollElement();
  scrollElement.scrollTop = 1200;
}

Answer 3

这会起作用的

$("#chatbox .simplebar-content-wrapper").scrollTop($("#chatbox .simplebar-content-wrapper").prop("scrollHeight"));