Question

我正在尝试在Meteor中建立聊天。但是，当a）页面加载或b）发送/接收新消息时，我正在努力使消息部分（这是一个占据屏幕80％的div）向下滚动到最新消息

我在html / js中找到了各种方法，例如这样：

function scrollToBottom(){
  window.scrollTo(0, document.body.scrollHeight);
}
scrollToBottom();

但我无法弄清楚如何将其整合到Meteor应用程序中。我试图将其置于“点击”状态。发送消息和加载消息的帮助程序的事件。虽然它没有用。任何帮助表示赞赏：）

Answer 1

对于无限滚动，您可以使用alethes:pages。你只需要定义：

this.Pages = new Meteor.Pagination(YourCollectionName, {
    debug: true,
    availableSettings: {
        limit: true,
        sort: true,
        filters: true,
        settings: true
    },
    templateName: "items",
    infinite: true,
    infiniteTrigger: .9,
    infiniteRateLimit: 1,
    infiniteStep: 1,
    itemTemplate: "item",
    pageSizeLimit: 1000,
    perPage: 5,
    maxSubscriptions: 500,
    dataMargin: 30,
    sort: {
        created_at: 1
    }
});

在模板渲染上设置：

Pages.set({
        filters: {
            //Custom filters
        }
    });

内部模板：

<template name="items">
    <div class="chat-discussion">
        {{> pagesNav}}
        {{> pages}}
   </div>
</template>

你还需要像这样定义你的模板：

<template name="item">
   //You can write you item (message body) here
</template>

如何在Meteor中自动滚动？

1 个答案: