Страницы

Поиск по вопросам

четверг, 2 апреля 2020 г.

Запуск события на определенном блоке при скролле с использованием malihu custom scrollbar

#javascript #jquery

                    
В продолжение вопроса.

Использую плагин malihu custom scrollbar

Есть такая простейшая структура:



$(window).load(function(){
  var container = $('#container');  
    
  container.mCustomScrollbar({
        	axis:"x",
            theme:"dark-3",
            // scrollbarPosition: 'outside',
            advanced:{ autoExpandHorizontalScroll:true },
            autoScrollOnFocus: true,

            callbacks:{
              whileScrolling:function(){
                var 
                windowWidth = $(window).width(),
                    thisLeft, 
                    thisWidth;

                $('section').each(function(){
                  thisLeft = $(this).offset().left;
                  thisWidth = $(this).width();

                  if(thisLeft < windowWidth ){
                    console.log($(this).attr('id'));
                  }else{

                  }
                });

              }
            }
        });   
  
});
main {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

section {
    display: block;
    width: 500px;
    border: 1px solid #000;
    padding: 1rem;
    margin-bottom: 2rem;
}

.js-page-scroll {
    width: 100%;
    overflow-x: auto;
}






1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

Суть проблемы в том, что при доскролле до секции должен выводится ее номер (в консоле) единожды, т.е при обратном скролле ничего в консоле не выводить. Конкретная задача с реализацией TweenMax: $(window).load(function(){ var windowWidth = $(window).width(); var thisLeft, thisWidth; function animateBlocks(){ // $('.animated').each(function(){ // thisLeft = $(this).offset().left; // thisWidth = $(this).width(); // if(thisLeft < windowWidth ){ // $(this).addClass('fadeInUp'); // }else{ // $(this).removeClass('fadeInUp'); // } // }); $('h2').each(function(){ var title = $(this); thisLeft = $(this).offset().left; thisWidth = $(this).width(); if(thisLeft < windowWidth ){ TweenMax.fromTo( title, 1, {scale: 0}, {scale: 1, ease: Elastic.easeOut.config(1, 0.5)} ); }else{ //$(this).removeClass('fadeInUp'); } }); } animateBlocks(); // Horizontal scroll var container = $('.js-page-scroll'); if(container.length){ container.mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, autoScrollOnFocus: true, callbacks:{ whileScrolling:function(){ animateBlocks(); } } }); } $(document).on("click","a[href^='#']",function(e){ var href=$(this).attr("href"),target=$(href).parents(".mCustomScrollbar"); if(target.length){ e.preventDefault(); target.mCustomScrollbar("scrollTo",href); } }); }); main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; width: 500px; border: 1px solid #000; padding: 1rem; margin-bottom: 2rem; } .js-page-scroll { width: 100%; overflow-x: auto; } .horizontal-wow { visibility: hidden; animation-name: null; } it-1 it-2 it-3 it-4 it-5

1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

Вопрос: Как, при скролле, запускать событие соответствующего блока единожды (добавить класс или вывести сообщение в консоли)? Для конкретного случая - запуск tweenMax единожды при достижении определенного блока, при обратном скролле - отмена (не запускать еще раз tweenmax). Т.е. запуск анимации, добавление класс, alert и прочее только раз после загрузки при скролле вперед и при попадании на определенный блок (есди section-1 - console.log(item-1) \ tweenmax1 , и т.д ...).


Ответы

Ответ 1



Решение: добавлять на каждый блок атрибут done='true' при первом запуске. Далее на запуск функции проверяем выставлен ли атрибут, если выставлен, то ничего не делаем, если не выставлен - вызываем функцию и устанавливаем done='true'. $(window).load(function(){ var container = $('#container'); container.mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition: 'outside', advanced:{ autoExpandHorizontalScroll:true }, autoScrollOnFocus: true, callbacks:{ whileScrolling:function(){ var windowWidth = $(window).width(), thisLeft, thisWidth; $('section').each(function(){ thisLeft = $(this).offset().left; thisWidth = $(this).width(); if(thisLeft < windowWidth ){ if(!this.getAttribute("done")) { console.log($(this).attr('id')); this.setAttribute("done",true); } }else{ } }); } } }); }); main { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } section { display: block; width: 500px; border: 1px solid #000; padding: 1rem; margin-bottom: 2rem; } .js-page-scroll { width: 100%; overflow-x: auto; }

1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?

5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?



Комментариев нет:

Отправить комментарий