javascript - 更改 ScrollReveal.js 视口(viewport)

Question

我想在我的项目中将 ScrollReveal.js ( https://github.com/julianlloyd/scrollReveal.js ) 与 Isotope 一起使用，以便在用户滚动时为对象设置动画，但页面必须具有适合整个视口(viewport)的固定 div。这意味着页面实际上并没有滚动，用户在固定的 div 内滚动。

我正在寻找一种方法来更改 ScrollReveal 引用的视口(viewport)。它不是跟踪页面的滚动，而是跟踪特定 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

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

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

这是一个可用的代码笔:http://codepen.io/anon/pen/ByRxKG

---

更新:v3.0.0

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

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

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