Как реализовать последовательное появление блоков с помощью malihu scroll bar?

Question

[Faber Estello]

Помогите пожалуйста реализовать последовательное появление блоков с помощью malihu scroll bar плагина.

пример на jsbin

p с классом .ef должны поочередно появляться, но
получается осуществить появление всех блоков одновременно, а вот чтобы поочередно при скролле соответствующего блока, не понимаю как задать условие.

Comments

[Dark Hole]

Мда.... Чертовщина какая-то

[Faber Estello]

Dark Hole: =D

Answer 1

[Dark Hole]

У вас там лишнее условие просто было

(function($){
            $(".content").mCustomScrollbar({
                axis:"y",
                callbacks:{
                    whileScrolling: function(){   
                        var x = this.mcs.content.find('.ef');
  
                        var d = -this.mcs.top;
                        x.each(function(i){
                            console.log(d);
                            var g = $(this).position().top;
                            var gh = $(this).height();
                            console.log(Math.round(gh));

                            if(d > Math.round(g) - 400) {
                                $(this).addClass('go');
                            }
                        });                 
                    }
                }
            });
        })(jQuery);

Криво, не спорю

Comments

[Faber Estello]

Спасибо!!!!

[Dark Hole]

Sen Selesss: можно небольшой вопрос?

[Faber Estello]

Dark Hole: конечно

[Faber Estello]

Dark Hole: кстати $(window).resize все равно не перестраивает x на y, что-то не так делаю (

[Dark Hole]

Sen Selesss: откуда код взяли?

[Dark Hole]

Sen Selesss: Ну... давайте код сюда

[Faber Estello]

Dark Hole: так вот отсюда код manos.malihu.gr/jquery-custom-content-scroller
из документации + свои недоделки

На страничке при большом разрешении - горизонтальная прокрутка, а при меньшем нужно чтобы перестраивалось на вертикальную. При ресайзе не происходит, только после перезагрузки страницы.

Примерно так:
(function($){
$(window).load(function(){
if ($(window).width() > 720) {
$(".scroll-grid__list").mCustomScrollbar({
axis:"x"
});
} else {
$(".scroll-grid__list").mCustomScrollbar({
axis:"y"
});
}
});
})(jQuery);

$(document).ready(function(){
$(window).on("resize", function(event){
if ($(window).width() > 720) {
$(".scroll-grid__list").mCustomScrollbar({
axis:"x"
});
} else {
$(".scroll-grid__list").mCustomScrollbar({
axis:"y"
});
}
});
});

[Dark Hole]

Sen Selesss: не можете на какой-нибудь файлообменник залить?

[Dark Hole]

Sen Selesss: не файлообменник, а этот... JSFiddle к примеру

[Faber Estello]

Dark Hole: https://jsbin.com/gegogi/edit?js,output

[Dark Hole]

Sen Selesss: function e(){
if ($(window).width() > 520) {
$(".content").mCustomScrollbar("destroy").mCustomScrollbar({
axis: "x",
advanced:{autoExpandHorizontalScroll:true}
});
} else {
$(".content").mCustomScrollbar("destroy").mCustomScrollbar({
axis: "y",
advanced:{autoExpandVerticalScroll:true}
});
}
}
$(window).load(e);

$(window).on("resize", e);

Робит

[Faber Estello]

Dark Hole: ВАУ!!! Спасибо огромное!!!

[Dark Hole]

Sen Selesss: кек. Еще что-то?

[Faber Estello]

Dark Hole: пока что все =)

[Faber Estello]

Dark Hole: оказывается есть еще и такой вариант manos.malihu.gr/code-example/responsive-custom-scr..., но для моего проекта он ен заработал, видимо в стилях что-то перемудрил

[Dark Hole]

Sen Selesss: никогда не трогайте код, если он работает. Да вы в ВК есть? Стыдно просто засирать тостер коментами

[Faber Estello]

Dark Hole: нет меня в соц. сетях, отвлекают они