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');

      },

});

感谢您的帮助！

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');

      },

});

Answer 2

将方向类添加到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);
    }
});

滚动方向（UP＆amp; DOWN）

2 个答案: