Question

当页面首次渲染时，它会自动滚动到元素的底部。

但是，每当我从左侧单击另一个聊天室时，如果房间的消息少于上一个聊天室，则其行为正常。如果点击的房间有更多的消息，它只会滚动到前一个房间的高度。

我的onRendered：

Template.singleRequest.onRendered(function () {
    $('#all-messages').scrollTop($('#all-messages').prop("scrollHeight"));
});

我相信原因是我有第二次收益。当您从左侧单击聊天室/请求时，它会使用iron：router

向右侧呈现

{{> yield "right-panel"}}

修改

我也试过

Template.singleRequest.onRendered(function () {
    Tracker.afterFlush(function () {
        $('#all-messages').scrollTop($('#all-messages').prop("scrollHeight"));
    });
});

修改：

我也试过给最后一个元素一个id并滚动到那个元素但仍然表现相同。非常奇怪......

Answer 1

我用一个简单的技巧解决了这个问题。

所以，在我的singleRequest中，我为里面的每条消息创建了一个新模板。

{{#each messages}}
    {{> singleMessage}}
{{/each}}

这样，每当我点击左边的另一个房间时，它再次呈现singleMessage模板，滚动效果非常好。

Template.singleMessage.onRendered(function () {
    $('#all-messages').scrollTop($('#all-messages').prop("scrollHeight"));
});

奇怪的滚动行为onRendered

1 个答案: