Question

假设我正在渲染一堆帖子。

{{#each posts}}
  {{>post}}
{{/each}}

我收到一堆按日期排序的帖子。

Posts.find({}, {sort:{name: 1, date:-1}, limit: Session.get('limit')}).fetch()

我已经在这里进行了一些反应性滚动，因为您期望从移动应用中获得。但现在的问题是，当有人发布新内容时，一切都会向下移动。我的滚动位置保持不变，但我不再查看相同的帖子了。

任何想法如何让这个工作？

编辑：

在我看来，最优雅的解决方案就像颠倒我们想到滚动的方式。如果我们以另一种方式对帖子进行排序 - 最高位置，那么新帖子将最终位于底部并且不会弄乱scrollTop位置。

编辑2：

我忘了提 - 我不知道我插入的元素的高度。否则，我可以安心和ugly brute force method。

Answer 1

好吧，我一直有同样的问题，这就是我提出的粗略解决方案。如果你发现任何漏洞，请告诉我。

Template.postsList.rendered = function (){
this.find('.wrapper')._uihooks = {
    insertElement: function (node, next){

        //hide newly added element, add a class to identify it as a post inserted 
        //after initial load.
        $(node).hide().insertBefore(next).addClass('insertedAfterLoad');

        //if it's at the top of the page, fade it in, otherwise it will stay hidden
        if (getDistance() === 0){
            $(node).fadeIn();
        } 
    }
},

//Continually watch the page while scrolling
$(document).scroll(function(){
        var scrollDistance = getDistance();

        //if any posts have the  'insertedAfterLoad' class, fade them into view.
        //this will only load new posts if the user scrolls back to the top
        if( scrollDistance === 0 && $('.post').hasClass('insertedAfterLoad') ){
            $('.insertedAfterLoad').fadeIn();
        }
});

//This will get the distance to the top of the page of any elements 
//inserted after the initial page load
var getDistance = function(){
        if( $('.post').hasClass('insertedAfterLoad') ){
            return $('.insertedAfterLoad').offset().top;
        }
    }
}

Answer 2

我对你真正想做的事情感到有些困惑，但是如果你想在底部有新帖子并滚动到它们，你可以做类似于我在这里做的事情{{ 3}}使用app进行流星。

首先，将scrollTo包添加到meteor app

$ meteor add natestrauser:jquery-scrollto

在用于将表单中的帖子提交到集合中的模板事件内部，添加带有scrollTo的setTimeout函数，该函数会在新帖子添加到集合后几毫秒内启动，并且会滚动到新帖子：

Template.posts.events({
    "submit .new-post": function (event) {
    var title = event.target.postTitle.value;
    var text  = event.target.postText.value;

    Posts.insert({
      title: title, 
      text: text, 
      date: new Date() // current time
    });

    setTimeout(function(){
        $(".posts-wrapper").scrollTo("max", 500); // change 500 miliseconds to whatever speed you want
    }, 100);

    // Clear form
    event.target.postTitle.value = "";
    event.target.postText.value = "";

    // Prevent default form submit
    return false;
  }
});

我们获取帖子，排序等的模板助手：

Template.posts.helpers({
    posts: function() {
        return Posts.find({}).fetch;
    }
});

带有表单的模板，用于添加帖子以及使用课程div在.posts-wrapper中呈现的帖子：

<template name="posts">
    <form class="new-post">
        <label>Post title: </label>
        <input type="text" name="postTitle">
        <label>Post text: </label>
        <input type="textarea" name="postText">
    </form>
    <div class="posts-wrapper">
        {{#each posts}}
            {{> post}}
        {{/each}}
    </div>
</template>

您可以在scrollTo中查看此操作，并查看此here中的代码。

如果您需要滚动整个<body>，请使用：

setTimeout(function(){
    $("body").scrollTo("max", 500); // change 500 miliseconds to whatever speed you want
}, 100);

当新帖子被反应渲染时如何保持滚动位置？

2 个答案: