更改滚动显示.js视口

Changing ScrollReveal.js viewport

本文关键字:js 视口 显示 滚动      更新时间:2023-09-26

我想在我的项目中使用ScrollReveal.js(https://github.com/julianlloyd/scrollReveal.js)和Isotope,以便在用户滚动时对对象进行动画处理,但页面必须有一个适合整个视口的固定div。这意味着页面实际上并没有滚动,用户在固定的div内滚动。

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

v2.3.2

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

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