滚动方向 (上 & 下)

Question

我正在使用scrollify.js https://projects.lukehaas.me/scrollify/ 。我已经使一切正常运行。但是我有一个分页，我基本上通过添加活动类来进行动画制作，具体取决于页面。但是现在动画发生了变化，它取决于您是从上往下滚动还是从下往上滚动。因此，我想添加active.fromTop或active.fromDown类。但是我在文档中找不到任何了解滚动方向的选项。

$.scrollify({
     section: ".section-scroll",
     easing: "easeOutExpo",
     sectionName: false,
     scrollSpeed: 550,
     setHeights: false,
     offset: 0,
     before: function(e) {

        $('.pagination li').eq(e).addClass('active');

      },

});

感谢帮助！

- Mario Sanchez Maselli

Answer 1

没有这个功能，请尝试这个

$.scrollify({
     section: ".section-scroll",
     easing: "easeOutExpo",
     sectionName: false,
     scrollSpeed: 550,
     setHeights: false,
     offset: 0,
     afterRender:function(){
                $('body').attr('data-preIndex',0);
                },
     before: function(e) {
                var direction,preIndex;
                preIndex = parseInt($('body').attr('data-preIndex'));
                if (e > preIndex){
                    direction = "down";
                    }else{
                    direction = "up";
            }

            $('body').attr('data-preIndex',e);

            console.log( direction );            

            $('.pagination li').eq(e).addClass('active');

      },

});

- Michael Jason

Answer 2

为了将direction类添加到body中，可以更加简洁地写成：

$.scrollify({
    afterRender() {
        $('body').attr('data-pre-index', 0);
    },
    before(i) {
        const $body = $('body');
        let preIndex = parseInt($body.attr('data-pre-index'));
        let direction = i > preIndex ? 'down' : 'up';

        $body
            .attr('data-pre-index', i)
            .removeClass('up down')
            .addClass(direction);
    }
});

- Ali Klein

Answer 3

对于像我这样在实施Michael的解决方案后，所有包含活动类的部分都存在问题的人，请将其链接到addClass函数... .siblings().removeClass('active');

- Shawn W