Question

我正在编写一个简单的Angular Chat Box，它包含一个可滚动的表和一个输入字段。输入放在最后。每次输入信息时，表格滚动都不会移动。我想把它集中在表格的最后一行。到目前为止，这是我的代码：

<table class="table">
    <tbody>
        <tr ng-repeat="msg in chatList ">
            <td><strong>{{ msg.sender}} : </strong>
            </td>
            <td>{{msg.message}}</td>
        </tr>
    </tbody>
</table>
<input type="text " ng-model="message " class="form-control " placeholder="Enter a Message ">
<button class="btn btn-primary btn-s " ng-hide="true " type="submit ">Submit</button>

Answer 1

正如其他人提到的那样，如果你没有使用其他HTML和CSS来实际设置滚动，这很难回答。

判断你使用type =＆＃34;提交＆＃34;这个聊天在表单提交时触发，我在表单中添加了一个指令，该指令可以将一个元素作为目标，在＃chat;＃39;上显示到底部滚动位置。理论上，如果你改变了事件处理程序，你可以将它挂钩到任何东西，尽管记得在销毁时删除它。

http://jsfiddle.net/U3pVM/11961/

.directive("fixBottom", function () {
    return {
        link: function (scope, element, attrs) {
            var scrollBot = function(){                
                var target = document.getElementById(attrs.fixBottom);
                target.scrollTop = target.scrollHeight;
            };

            element[0].addEventListener("submit", scrollBot);

            scope.$on('$destroy', function () {
                 element[0].removeEventListener("submit", scrollBot);
            });
        }
    }
})

Answer 2

如果没有看到你的html的其余部分，这可能不是你需要的，但是如果只是滚动到输入框位置，那么最后TR应该在那之上呢？

$('html, body').animate({
    scrollTop: $("#IDOfTheInput").offset().top
}, 2000);

始终滚动到可滚动表的末尾

2 个答案: