jquery - 渲染时奇怪的滚动行为

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"));
});