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

Question

我有一个正在开发的聊天消息应用程序。我有一个将 overflow-y 设置为 auto 的 div，但问题是，当我运行脚本时，它会显示最重要的消息，因此每次调用获取请求时 ($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 的不同解决方案持开放态度。

Answer 1

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

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

类似于此，不过我会稍微玩一下这个数字，我没有您尝试使用的工作模型，所以数字可能会关闭。

这是我获得上述代码的帖子中的已接受答案 --> https://stackoverflow.com/a/26344313/1214743

您可能想看看周围其他人在做什么，似乎有一种更简单的方法可以完成您正在尝试做的事情。

如果我是你，我会谷歌“Angular Chat Scroller”。