javascript - 如何在Angular 1中为动态div进行$ anchorscroll(重复元素)

我有一个正在使用的聊天消息应用程序。我有一个div，溢出-y设置为auto，但事实是，当我运行脚本时，它向我显示了顶部消息，因此每次调用获取请求（$ scope.chatRoomMsgs）时，顶部消息都是如图所示。每次调用获取请求时，我希望它滚动到列表的底部。

var app = angular.module("chatApp", ['ngSanitize']);
app.controller('ChatController', function($scope, $http) {

$scope.chatroom_id;
$scope.chatRoomMsgs = function(id) {
    $scope.chatroom_id = id;
    $http.get("readMessages.php?chatroom_id=" + id).success(function(msgs) {
        $scope.chat = msgs;
    });
}
});

这是前端。对每个消息重复li标签。 Div #messages是容器。

        <div id="messages" class="compressed">
            <ul id="test" ng-repeat="x in chat | filter : {'initial_message':'N'} | orderBy : 'message_id'">
                <li class="{{ x.class }}">
                    <span class="{{ x.status }}">{{ x.sender }}</span>
                    <span class="time">{{ x.timestamp | date : "EEE d MMM h:mm a"}}</span>
                    <br>
                    <span id="message" class="message" ng-bind-html="x.message"></span>
                </li>
            </ul>
        </div>

我对可能包括jquery的不同解决方案持开放态度。

最佳答案

您需要设置保存消息的div的ScrollTop属性

var chatBox = document.getElementById('messages');
chatBox.scrollTop = 300 + 8 + ($scope.chat.length * 240);

与此类似，虽然我会稍微考虑一下数字，但是我没有您要使用的工作模型，所以数字可能不正确。

这是我收到上面代码的帖子的接受答案-> https://stackoverflow.com/a/26344313/1214743

您可能想看看其他人在做什么，看来可能有更简单的方法来做您想做的事情。

如果您是我，我会使用Google“ Angular Chat Scroller”。

关于javascript - 如何在Angular 1中为动态div进行$ anchorscroll(重复元素)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47856818/