Question

我想在我的项目中使用ScrollReveal.js（https://github.com/julianlloyd/scrollReveal.js）和Isotope在用户滚动时为对象设置动画，但页面必须有一个适合整个视口的固定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>

Codepen：http://codepen.io/grahammcuk/pen/ogBNdp

Answer 1

V2.3.2

关键是在构造函数配置对象中指定视口。

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

这是一个有效的Codepen：http://codepen.io/anon/pen/ByRxKG

更新： v3.0.0

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

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

构造函数已大写
viewport -renamed-＆gt; container

更改ScrollReveal.js视口

1 个答案: