Запуск события на определенном блоке при скролле с использованием 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?