奇怪的滚动行为 onRendered答案

【问题标题】：Weird scroll behaviour onRendered奇怪的滚动行为 onRendered
【发布时间】：2016-03-15 14:52:48
【问题描述】：

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

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

我的 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 并滚动到那个元素，但仍然表现相同。很奇怪……

【问题讨论】：

标签： jquery meteor iron-router

【解决方案1】：

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

因此，在我的 singleRequest 中，我为其中的每条消息创建了一个新模板。

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

这样，每当我从左侧单击另一个房间时，它会再次呈现 singleMessage 模板，并且滚动效果很好。

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

【讨论】：