В продолжение вопроса
Использую плагин 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; }
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 , и т.д ...).
Ответ
Решение: добавлять на каждый блок атрибут 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?
Комментариев нет:
Отправить комментарий