Question

我正在使用Simplebar和角度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布局将消息保留在底部（这也不是简单栏以来的工作。但我当时正在处理1个问题）

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

如果您已经使用 data-simplebar html 属性来初始化 SimpleBar，那么可以使用以下代码来滚动它：

$('#simple .simplebar-content-wrapper').scrollTop(some_value);

实际的可滚动元素将具有 simplebar-content-wrapper 类，它位于您为其添加 SimpleBar 的元素内。类 simplebar-content-wrapper 在其 documentation 中被提及，并且可以预期在不同版本之间保持一致。

或者，如果您在其中级联了 SimpleBars，请尝试：

$('#simple .simplebar-content-wrapper')[0].scrollTop = some_value;

与 2021 年一样，Element.scrollIntoView() 可用于自动滚动可滚动内容以使特定元素可见。滚动聊天框以在底部显示最后一个项目：

$('#chatbox .messages').slice(-1)[0].scrollIntoView({block: "end"});

这由 Web API 记录，您可能需要检查其浏览器兼容性。我相信放弃一些仍在使用过时浏览器的少数用户的可选用户体验是没有问题的，以换取更干净的代码和更少的编码时间，应该“惩罚”的不是我，而是他们因为他们的无知。

说明：

$('#chatbox .chat') 选择 chatbox 内的所有聊天消息。
.slice(-1)[0] 选择最后一个。
scrollIntoView({block: "end"}) 滚动可滚动内容以使消息在底部可见。

Answer 4

这会起作用

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

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

4 个答案: