奇怪的滚动行为 onRendered

Question

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

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

我的 onRendered：

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

我相信原因是我有第二个收益。当您从左侧单击 chatroom/request 时，它会以 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

Weird scroll behaviour onRendered

jquery

meteor

iron-router