scrollreveal.js 和 flexbox

Posted 2023-03-06

【中文标题】scrollreveal.js 和 flexbox

【英文标题】：scrollreveal.js and flexbox

【发布时间】：2018-06-18 03:01:03

【问题描述】：

我在将 scrollreveal.js 与 flexbox 一起使用时遇到问题。

我使用 display flex 在页面上创建了几个两列行，当尝试使用 scrollreveal 引用分别显示每一列时，只有其中一个正在工作。

在仍然能够保持 flex 属性的同时有任何解决方法吗？

html

<div class="grid">
  <div class="column __50 __reveal">one</div>
  <div class="column __50 __reveal">two</div>
</div>

CSS

.grid 
  display: flex;


.column.__50 
  width: 50%;

JS

window.sr = ScrollReveal(
  distance: '30px',
  duration: 1000,
  scale: 0
);
sr.reveal('.__reveal');

【问题讨论】：

得到一个正确的答案，发布一个工作代码 sn-p 重现您描述的问题。

根据您发布的示例，我没有看到问题。

【参考方案1】：

如果我明白你的意思：

鉴于现有代码 页面滚动时 然后- 列应该滚动到视图中

我提供了一个 sn-p，它表明它确实可以根据您的代码工作，但您必须为滚动显示效果提供足够的空间。

测试

添加一个占据初始视图空间的 div。

为.column.__50 类添加一个高度，以便您可以看到它的实际效果。

添加边框以便您查看它们的放置方式，您可以随时在不再需要边框后将其注释掉。 “调试”和可视化 div 的良好做法。

window.sr = ScrollReveal(
        distance: '30px',
        duration: 1000,
        scale: 0
    );
    sr.reveal('.__reveal');

.grid 
  display: flex;

.column.__50 
  width: 50%;
  height: 800px;
  border: 2px solid black;

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
  <div class="column __50 ">
    No class="__reveal 1"
  </div>
  <div class="column __50 ">
    No class="__reveal 2"
  </div>
</div>
<div class="grid">
  <div class="column __50 __reveal">
    one
  </div>
  <div class="column __50 __reveal">
    two
  </div>
</div>

【参考方案2】：

据我了解，您必须将序列间隔（以毫秒为单位）传递给reveal() 方法，使序列动画变得轻而易举。

sr.reveal('.__reveal', 300);

You can read the documentation from this reference link

堆栈片段

window.sr = ScrollReveal(
  distance: '30px',
  duration: 1000,
  scale: 0
);
sr.reveal('.__reveal', 300);

.grid 
  display: flex;
  font: 13px Verdana;
  flex-wrap: wrap;


.column.__50 
  width: 50%;
  height: 100px;
  background: red;
  border: 8px solid #ffffff;
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
  <div class="column __50 __reveal">one</div>
  <div class="column __50 __reveal">two</div>
  <div class="column __50 __reveal">three</div>
  <div class="column __50 __reveal">four</div>
</div>