Question

我无法使用YUI3创建动画滚动。

它应与iOS惯性滚动兼容，我想以编程方式触发动画滚动。但由于缺少文档，我无法找到YUI3的正确语法。

1）以下代码有效：

   scrollArea._node.scrollLeft = 200; //the element is scrolled!
   // so the variable is defined correctly and CSS also works!

2）以下代码也有效（如果我使用绝对定位来模拟滚动）：

        animation = new Y.Anim({
            node: content,
            to: {
                left: -200
            }
        });
        animation.run();

3）但以下不是：

        animation = new Y.Anim({
            node: scrollArea,
            scroll: {
                to: {
                    scrollLeft: 200
                }
            }
        });
        animation.run();

4）以下是标记的样子：

<div class="scroll-area"> <!-- scrollArea, overflow: scroll -->
    <ul class="content"> <!-- content -->
        <li></li><li></li><li></li>
    </ul>
</div>

我希望这只是语法问题。 Here the question is solved for YUI2

Answer 1

在第三个示例中，问题似乎是您使用scroll作为Anim构造函数的属性，它对YUI2的Scroll实用程序的工作方式有效，但YUI3's Anim比这一点。

你第二次尝试就接近了。这是修改后的代码：

    animation = new Y.Anim({
        node: scrollArea,
        to: {
            scrollLeft: 200
        }
    });
    animation.run();

我已将scrollLeft字段移至to attribute，并将节点更改为scrollArea而非content。如果您打算经常执行此动画滚动操作，那么我是否可以建议创建一个重用单个Anim对象的包装函数。在展示此类重用时，此example可能对您有用。祝你好运。

如何在YUI3中实现动画滚动？

1 个答案: