Javascript 在滚动条上按顺序显示容器中的元素

我正在使用滚动显示动画。我想做的是，当到达容器的位置时，按顺序显示容器的子项。我该怎么做？我发现很难理解它的文档

这是我的密码

<div class="container-fluid features" style="padding-bottom: 75px;">
            <h2 style="text-align: center;">Features</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="featureOne">
                        <div class="row">
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>
                            <div class="col-md-2">
                                <img src="img/cog-upd.png" style="margin-top: 42px;position: absolute;right: -55px;" />
                            </div>
                        </div>

                    </div>
                    <div class="featureTwo">
                        <div class="row">
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>
                            <div class="col-md-2">
                                <img src="img/task-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
                            </div>
                        </div>

                    </div>
                    <div class="featureThree">
                        <div class="row">
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>
                            <div class="col-md-2">
                                <img src="img/payment-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <img class="ipad" src="img/ipad-center.png" style="display:block;margin:auto;padding-top: 35px;" />
                </div>
                <div class="col-md-4">
                    <div class="featureFour">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="img/integration-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
                            </div>
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>

                        </div>

                    </div>
                    <div class="featureFive">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="img/ach-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
                            </div>
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>

                        </div>

                    </div>
                    <div class="featureSix">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="img/config-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
                            </div>
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

特征
洛勒姆
洛勒姆
洛勒姆
洛勒姆
洛勒姆
洛勒姆

滚动显示代码

<script>
        window.sr = ScrollReveal();
        sr.reveal('.ipad', {
            duration: 500,
            origin: 'bottom'
        });
        sr.reveal('.featureOne', {
            duration: 1000,
            origin: 'left',
            delay: 500
        });
        sr.reveal('.featureTwo', {
            duration: 1000,
            origin: 'left',
            delay: 800
        });
        sr.reveal('.featureThree', {
            duration: 1000,
            origin: 'left',
            delay: 1300
        });
        sr.reveal('.featureFour', {
            duration: 1000,
            origin: 'left',
            delay: 1800
        });
        sr.reveal('.featureFive', {
            duration: 1000,
            origin: 'left',
            delay: 2200
        });
        sr.reveal('.featureSix', {
            duration: 1000,
            origin: 'left',
            delay: 2600
        });
    </script>

window.sr=ScrollReveal（）；
高级展示（“.ipad”{
持续时间：500，
来源：“底部”
});
高级展示（“.featureOne”{
持续时间：1000，
起源：'左'，
延误：500
});
高级揭示（“.特征二”{
持续时间：1000，
起源：'左'，
延误：800
});
高级分隔缝（“.FeatureTree”{
持续时间：1000，
起源：'左'，
延误：1300
});
高级揭示（“.特征四”{
持续时间：1000，
起源：'左'，
延误：1800
});
高级揭示（“.特征五”{
持续时间：1000，
起源：'左'，
延误：2200
});
高级揭示（'特征六'{
持续时间：1000，
起源：'左'，
延误：2600
});

您的源代码中是否有id=solution的元素？是的，我有。忽略#解决方案部分。这与此无关。我将再次更新我的问题并删除它。谢谢你邀请@Tejasvikarneimplementthesource，正如你发布的，这是给我的。该问题一定是由某些致命错误引起的，例如未定义的函数或变量正在停止执行scrollReveal。打开你的控制台，看看有没有错误。看，它对我也有效。我的问题是，只有当我到达元素的位置时，我才能看到它显露出来。我希望容器内的所有元素，以显示顺序时，我到达的滚动容器的起始位置@特贾斯维卡恩