Как остановить функцию при прокрутке js?

131

13 мая 2019, 09:30

Вот скрипт который работает следующим образом : есть 7 блоков , между ними разстояние 100 px и они все находятся в блоке "timeline".В этом блоке если легонько прокрутить колесико мышки оно автоматически прокрутится к следующему блоку (типа как слайдер).Проблемка следующая: после блока таймлайн идут еще блоки (продолжение страницы одним словом) и прокрутка должна становится обычной. В коде прописано что если num > 7 num = 7.В общем нужно чтобы если num > 7 функция останавливалась и пользователь крутит дальше вниз страницы НО ЕСЛИ ОН НАЧНЕТ КРУТИТЬ ВВЕРХ ПРОКРУТКА В ТАЙМЛАЙНЕ ОПЯТЬ ДОЛЖНА РАБОТАТЬ КАК ИЗНАЧАЛЬНО

var num = 1; 
var scrolling = false; 
 
$(".timeline").bind('mousewheel DOMMouseScroll', function(event) { 
  scroll(event); 
}); 
 
 
function scroll(event) { 
  event.preventDefault(); 
  if (!scrolling) { 
    scrolling = true; 
    if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0) { 
      num++; 
       num = num > 7 ? 7 : num;   
    }  
    else { 
      num--; 
      num = num < 1 ? 1 : num; 
    } 
 
   $('html, .timeline').animate({ 
    scrollTop: $(".num" + num).offset().top -100 
  },  
  500, "linear", function() { 
    scrolling = false; 
  });  
 } 
}

Answer 1

Селектор <div class="js-animationElement">...</div> В зоне видимости добавляется класс inView и убирается. Вот пример

    var $animationElement = $('.js-animationElement'),
    $window = $(window);
    function inView() {
        var windowHeight = $window.height(),
            delta = windowHeight * 3 / 4,
            windowWidth = $window.width(),
            windowTop = $window.scrollTop(),
            windowBottom = (windowTop + delta);

        $animationElement.each(function() {
            var $element = $(this),
                elementHeight = $element.outerHeight(),
                elementTop = $element.offset().top,
                elementBottom = (elementTop + elementHeight);
            if (elementBottom >= windowTop && elementTop <= windowBottom) {
                $element.addClass('inView');
            }
        });
    }
    $window.on('scroll resize', inView);
    $window.trigger('scroll');  
    }

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Разный результат вследствие window.onload

Недавно начал знакомство с canvas и javascript, сразу решил сделать попробовать сделать арканоид и сразу столкнулся с проблемой, при реализации функции...

138

javascript