垂直滚动多个div

Question

我有一个分为4个部分的结构。 在其中一部分中，我的父div内有3个div。 我已经给父div设置了高度，以便一次只能看到一个内部div。

现在，当我滚动时，我希望可见的div向上滑动，而下一个div进入可见的位置。 所以基本上在三次滚动中，我应该能够看到父div内的所有3个div。

我想要每个div上都有动画效果。 例如：当我滚动时，可见的div应该向上滑动，而下一个div应该同时滑动到该位置。

<div class="col-xs-6" id="scroll">
     <div class="left">
           <div id="div1"></div>
           <div id="div2"></div>
           <div id="div3"></div>
     </div>
</div>

Answer 1

参见以下示例： http : //jsfiddle.net/kevalbhatt18/6j0c7bfo/

$(window).on('DOMMouseScroll', function (e) {
    alert('1')
}).on('mousewheel', function (e) {
    if ($(e.target).prev()[0] !== undefined) {
        $('#' + $(e.target)[0].id).animate({
            height: '0px',
            opacity: 0.25,
        }, 1000, function () {
            // Animation complete.
        });
    } else {
       $('#' + $(e.target)[0].id).animate({
            height: '0px',
            opacity: 0.25,
        }, 1000, function () {
          $('div[role="scroll"]').height('100px')
          $('div[role="scroll"]').css('opacity','')
        });
    }
});

Answer 2

好了，有很多方便的jQuery插件可用于管理滚动事件/效果。 这是我喜欢的一个：

超级卷轴

他们正在其站点上演示该插件，看起来您可以利用它。 如果您向下滚动传递所有效果，它们也有文档。

如果该插件不适合您，那么就像我提到的那样，有很多插件。 以下是六个列表： http : //webdesignledger.com/tools/6-jquery-plugins-for-scrolling-effects

让我知道您是否需要更多帮助。 希望这对您有所帮助！