更改ScrollReveal.js视图

Question

我希望在我的项目中使用带有同位素的ScrollReveal.js (https://github.com/julianlloyd/scrollReveal.js)来在用户滚动时将对象动画化，但是页面必须有一个适合整个视图的固定div。这意味着页面不会实际滚动，用户会在固定的div中滚动。

我正在寻找一种改变ScrollReveal引用的视口的方法。它不是跟踪页面的滚动，而是跟踪特定div的滚动。

有什么想法吗？

提前感谢

<main id="mainn">
        <div class="isotope">
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
            <div data-sr='scale up 20%' class="item width2"></div>
            <div data-sr='scale up 20%' class="item width2 height2"></div>
        </div>
    </main>

在这里：http://codepen.io/grahammcuk/pen/ogBNdp

Answer 1

v2.3.2

关键是在构造函数config对象中指定一个viewport。

window.sr = new scrollReveal({ viewport: document.getElementById('main') });

下面是一个工作代码：http://codepen.io/anon/pen/ByRxKG

更新： v3.0.0

这个概念是一样的，但看起来有点不同：

window.sr = ScrollReveal({ container: document.getElementById('main') });

• 构造函数大写
• viewport -重命名-> container