Javascript Famo.us ScrollView在聊天中滚动查看

我有

ScrollView

和其中的表面元素序列。 我希望能够滚动到最新的元素，只要它出现在数组中

这是一个演示，我想它被滚动就像在任何聊天应用程序。。。旧曲面将超出场景，而新曲面将始终位于底部。问题与此相同：

---

我假设您输入了一个非常大的整数，以使scrollview移到末尾，显示您的“最新”元素

如果曲面的宽度相同（假设scrollview的X方向），则可以通过检查移动到scrollview右边缘的最后一个项目所需的实际像素数来获得更平滑的结果。您拥有运行sequenceFrom（）的原始数组。将其中的项目数乘以曲面宽度，然后减去scrollview宽度的像素数（可以设置为“未定义”，在这种情况下，您需要查看窗口的宽度），以调整将最新元素移到scrollview的右侧而不是左侧

如果曲面的大小不同，则在将每个曲面添加到背衬阵列时，可以通过向曲面添加特性来更改跟踪每个曲面的x偏移。然后，您可以询问曲面的偏移量是多少，然后减去滚动视图宽度的正确值

---

希望这有助于您更近距离。

通过将ScrollView旋转180˚并将其内部的所有表面旋转180˚来解决此问题

---

嗯，那太狡猾了！这是一对额外的矩阵，如果你在这些节点中有很多文本内容，它们可能会变得非常慢

我想，通过使用一个巨大的数字，这只是为了迫使famo.us滚动到视图的末尾

如果发生了渲染，您还可以：

pos = getPosition(nodeNum)  // for last elements scrollposition
setPosition(pos)

但如果插入发生在与移动控件相同的代码块中，则尚未渲染

这里提供了一个复杂的解决方法，使用事件在部署/渲染发生后触发大小计算：

这是另一个技巧，用不可模仿的@约翰逊

您是否也看过Engine.nextTick（）或JQuery.deferred？

---

似乎在插入内容后会立即出现“未渲染”的瞬间，但在更新后，可以确定大小

著名的flex ScrollView通过将alignment属性设置为1来支持这一点

请参阅此演示：

---

嘿！谢谢回复！是的，我使用的是

scrollView.setPosition（20000）

。问题是，当将曲面放置到序列时，如何计算曲面的偏移，因为它尚未渲染。据我所知，在得到曲面的偏移量后，我需要执行如下操作：

scrollView.setPosition（surface.offset-scrollView.height）

，对吗？：）从你的问题来看，我担心可能没有好的答案。但也许更多的信息会有所帮助。创建每个曲面时，您对“大小”数组选项的设置是什么？设置位置的规则性很差。如果你一次在屏幕上做的足够多，它可能会被剪切，只会滚动一部分距离。如果你有一个带有滑动式滚动视图的应用程序，只需要几分钟，你就会发现它的速度很慢，而且它不会一直运行下去。

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Scrollview = Famous.Views.Scrollview;
    var Timer = Famous.Utilities.Timer;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var ContainerSurface = Famous.Surfaces.ContainerSurface;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];
    var i = 0;
    var surfaceHeight = 50;

    scrollview.sequenceFrom(surfaces);

    Timer.setInterval(function () {
        var container = new ContainerSurface({
            size: [undefined, surfaceHeight]
        });

        var temp = new Surface({
            content: "Surface: " + (i + 1),
            size: [undefined, surfaceHeight],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "50px",
                textAlign: "center"
            }
        });

        var surfaceRotate = new StateModifier({
            transform: Transform.rotateZ(Math.PI)
        });

        var surfacePush = new StateModifier({
            transform: Transform.translate(window.innerWidth, surfaceHeight)
        });

        container.add(surfacePush).add(surfaceRotate).add(temp);
        container.pipe(scrollview);
        temp.pipe(scrollview);
        surfaces.unshift(container);
        i++;
    }, 400);

    var rotate = new StateModifier({
        transform: Transform.rotateZ(Math.PI)
    });

    var push = new StateModifier({
        transform: Transform.translate(window.innerWidth, window.innerHeight)
    });

    mainContext.add(push).add(rotate).add(scrollview);
});

pos = getPosition(nodeNum)  // for last elements scrollposition
setPosition(pos)